在我做的項目中遇到了兩種表格的下載方式，主要是與后端接口有關(guān)，以及后端是如何處理數(shù)據(jù)流方式有關(guān)，這里我只針對前端做出總結(jié)：
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;
    // 下載的接口調(diào)用
    downloadPurchaseOrderList(params).then((res) => {
        if (res === undefined) {
            this.$mtd.message.error('導(dǎo)出失敗');
            return;
        }
        // 構(gòu)造一個blob對象來處理數(shù)據(jù)，并設(shè)置文件類型
        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' }); 
        // 創(chuàng)建新的URL表示指定的blob對象
        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對象
      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,',否則下載出來的表格。表頭會自動轉(zhuǎn)換為英文
        });
        headerStr += '\n';
        // 增加\t為了不讓表格顯示科學(xué)計數(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);
        // 通過創(chuàng)建a標(biāo)簽實現(xiàn)
        const link = document.createElement('a');
        link.href = uri;
        // 對下載的文件命名
        link.download = `${fileName || '表格數(shù)據(jù)'}.xlsx`;
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }