VUE实现在前后端导出EXCEL

VUE实现在前端导出EXCEL

1. 安装依赖

• npm install -S file-saver
• npm install -S xlsx
• npm install -D script-loader

2. 在项目中创建一个文件夹（比如vendor，一般是在src目录下创建），将ExportExcel.js放到这个文件下

3. 使用

exportExcel() {//导出方法     
 // const { export_json_to_excel } = await import("@/vendor/ExportExcel");
 import("@/vendor/ExportExcel").then(excel => {        
    const tHeader = ["序号", "名称"]; //表头       
    const filterVal = [ "code", "name"]; //值 （接口返回的表格数据对应的属性名）    
    const data = this.formatJson(filterVal, this.tableData); //this.tableData表格数据    
    excel.export_json_to_excel({         
      header: tHeader,          
      data,         
      filename: "table-list" //导出的Excel名称        
      });      
    }); 
},
    
formatJson(filterVal, jsonData) {     
  return jsonData.map(v => filterVal.map(j => {return v[j];}));
}

VUE实现后端导出EXCEL

• EXPORT: 接口名
• params: 接口参数
• depName: Excel表名

this.$post(EXPORT, {
    params
}, {
    responseType: 'blob'
}).then(res => {
    let blobUrl = window.URL.createObjectURL(res);
    const a = document.createElement('a');
    a.style.display = 'none';
    a.download =  `${depName}.xls`;
    a.href = blobUrl;
    a.click();
    a.remove();
});

对比

• 前端生成不占用服务器资源，生成速度更快
• 后端生成更加稳定，针对比较复杂的表格能有更好的实现