在我做的項(xiàng)目中遇到了兩種表格的下載方式棚赔，主要是與后端接口有關(guān)媒惕，以及后端是如何處理數(shù)據(jù)流方式有關(guān)，這里我只針對(duì)前端做出總結(jié)：
1.如果后端接口是以post方式請(qǐng)求
- 首先按鈕這里需要加上:href
<button
:href="doDownloadAll()"
download>下載
</button>
- 然后方法里要這樣寫(xiě)
doDownloadAll() {
let params = {
data1,
data2
}
return '/jiekou/download'.concat("?para=",JSON.stringify(params))
},
2.如果后端接口是以get方式請(qǐng)求
// 接口申明
const downloadTemplate = (params) => {
return service.get('/portal/purchaseOrder/downloadTemplate', {
params来庭，// 普通接口傳參
responseType: 'blob' //必須要傳的類(lèi)型
});
};
//html頁(yè)面
<button @click="handleDownLoadFunc()">下載</button>
// 方法
handleDownLoadFunc() {
const { mQueryObj } = this;
let params = mQueryObj;
// 下載的接口調(diào)用
downloadPurchaseOrderList(params).then((res) => {
if (res === undefined) {
this.$mtd.message.error('導(dǎo)出失敗');
return;
}
// 構(gòu)造一個(gè)blob對(duì)象來(lái)處理數(shù)據(jù)妒蔚，并設(shè)置文件類(lèi)型
const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
// 創(chuàng)建新的URL表示指定的blob對(duì)象
const href = URL.createObjectURL(blob);
// 創(chuàng)建a標(biāo)簽
const a = document.createElement('a');
a.style.display = 'none';
// 指定下載鏈接
a.href = href;
// 指定下載文件名
a.download = new Date().toLocaleTimeString() + '.xlsx';
// 觸發(fā)下載
a.click();
// 釋放URL對(duì)象
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,'; //如果表頭中有日期就需要每個(gè)表頭后+'\t,',否則下載出來(lái)的表格。表頭會(huì)自動(dòng)轉(zhuǎn)換為英文
});
headerStr += '\n';
// 增加\t為了不讓表格顯示科學(xué)計(jì)數(shù)法或者其他格式
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);
// 通過(guò)創(chuàng)建a標(biāo)簽實(shí)現(xiàn)
const link = document.createElement('a');
link.href = uri;
// 對(duì)下載的文件命名
link.download = `${fileName || '表格數(shù)據(jù)'}.xlsx`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
