vue项目导出xlsx文件步骤
1. 设置一个按钮,绑定单击响应函数doExport():
<a href="#" slot="extra" @click.prevent="doExport">
<Icon type="forward"></Icon>导出 <!-- 这里使用了iview模板,不懂的可以直接使用button标签 -->
</a>
2. 导出函数模板如下:
doExport () {
axios({
method: 'get',
// 这里输出表格内的所有数据,如果想导出指定数据,只需要修改中间的拼串就行了(再进行一次封装)
url: window.location.origin + '/yyzt3-web/operation/pc/feedback/export.do?contact=' + this.formOptions.contact + '&context=' + this.formOptions.context,
header: {
token: localStorage.Token, // 有点类似于保存密码,可减少服务器的传输压力(具体知识点见帖子)
'Content-Type': 'application/json,charset=utf-8' // 从服务器端请求的数据类型
},
responseType: 'arraybuffer'
//返回数据以二进制流形式保存
}).then(res => {
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel,charset=utf-8'}); // File对象就是一种特殊的Blob,File 接口基于Blob
const fileName = '意见反馈.xlsx'; // 文件名字
// 注意,这是非IE下载
const elink = document.createElement('a'); // 通过elink得到一个<a>标签(有点类似于ref)
elink.download = fileName; // 规定被下载的超链接目标
elink.style.display = 'none'; // 设置样式(照抄就行了)
elink.href = URL.createObjectURL(blob); // 为<a>标签绑定href属性
document.body.appendChild(elink); // 创建一个<a>标签
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL对象
document.body.removeChild(elink);
});
},
3. 功能完成,快来试试吧~