第十一次：如何实现表格的下载

在我做的项目中遇到了两种表格的下载方式，主要是与后端接口有关，以及后端是如何处理数据流方式有关，这里我只针对前端做出总结：
1.如果后端接口是以post方式请求

• 首先按钮这里需要加上:href

下载

• 然后方法里要这样写

 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页面
下载
// 方法
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);
    }