在我做的项目中遇到了两种表格的下载方式，主要是与后端接口有关，以及后端是如何处理数据流方式有关，这里我只针对前端做出总结：
1.如果后端接口是以post方式请求
- 首先按钮这里需要加上:href
<button
:href="doDownloadAll()"
download>下载
</button>
- 然后方法里要这样写
doDownloadAll() {
let params = {
data1,
data2
}
return '/jiekou/download'.concat("?para=",JSON.stringify(params))
},
2.如果后端接口是以get方式请求
// 接口申明
const downloadTemplate = (params) => {
return service.get('/portal/purchaseOrder/downloadTemplate', {
params，// 普通接口传参
responseType: 'blob' //必须要传的类型
});
};
//html页面
<button @click="handleDownLoadFunc()">下载</button>
// 方法
handleDownLoadFunc() {
const { mQueryObj } = this;
let params = mQueryObj;
// 下载的接口调用
downloadPurchaseOrderList(params).then((res) => {
if (res === undefined) {
this.$mtd.message.error('导出失败');
return;
}
// 构造一个blob对象来处理数据，并设置文件类型
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
// 创建新的URL表示指定的blob对象
const href = URL.createObjectURL(blob);
// 创建a标签
const a = document.createElement('a');
a.style.display = 'none';
// 指定下载链接
a.href = href;
// 指定下载文件名
a.download = new Date().toLocaleTimeString() + '.xlsx';
// 触发下载
a.click();
// 释放URL对象
URL.revokeObjectURL(a.href);
}).catch((err) => {
console.log(err);
});
}
3.纯前端生成表格并下载
downLoadExcel (data:any, fileName:any) {
// 定义表头
let headerStr:any = '';
col.map((item:any) => {
headerStr += item.attrs.label + '\t,'; //如果表头中有日期就需要每个表头后+'\t,',否则下载出来的表格。表头会自动转换为英文
});
headerStr += '\n';
// 增加\t为了不让表格显示科学计数法或者其他格式
for (let i = 0; i < data.length; i++) {
for (const item in data[i]) {
headerStr += `${data[i][item] + '\t'},`;
}
headerStr += '\n';
}
// encodeURIComponent解决中文乱码
const uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(headerStr);
// 通过创建a标签实现
const link = document.createElement('a');
link.href = uri;
// 对下载的文件命名
link.download = `${fileName || '表格数据'}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
