一、引入插件
1、npm命令引入插件依赖：
cnpm install --save xlsx file-saver
2、页面引入
// 引入导出Excel表格依赖 import FileSaver from "file-saver"; import XLSX from "xlsx";
二、使用插件导出数据
1、给El-Table加id：
<!-- 表格1 --> <el-table :data="tableData" border height="750px" id="table1"> <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column> </el-table> <!-- 表格2 --> <el-table :data="tableData" border height="750px" id="table2"> <el-table-column :prop="item.value" :key="item.value" :label="item.label" v-for="item in column" v-if="item.show" :width="item.width"></el-table-column> </el-table>
2、触发导出事件：
（1）参数method为需要导出的表格id；
（2）经过去除fixed元素操作来避免数据因为El-Table里的分表而重复导出；
（3）wb = XLSX.utils.table_to_book(table,{raw:true})中的raw:true表示不自动获取格式，统一按照文本格式导出，可以有效避免超过12位的数字导出后变成科学记数法的问题。
handleExportVue(method){ // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，避免导出的数据重复 let fixRight = document.querySelector("#"+method).querySelector(‘.el-table__fixed-right‘); let fixLeft = document.querySelector("#"+method).querySelector(‘.el-table__fixed-left‘); let wb = null; let table = document.querySelector("#"+method); if (fixRight || fixLeft) { if(fixRight){ table = table.removeChild(fixRight); } if(fixLeft){ table = table.removeChild(fixLeft); } wb = XLSX.utils.table_to_book(table,{raw:true}); if(fixRight){ document.querySelector("#"+method).appendChild(fixRight); } if(fixLeft){ document.querySelector("#"+method).appendChild(fixLeft); } } else { wb = XLSX.utils.table_to_book(table,{raw:true}); } //获取二进制字符串作为输出 let wbout = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array" }); try { if(method == ‘table1‘){ //设置导出文件名称 FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格1.xlsx"); }else if(method == ‘table2‘){ //设置导出文件名称 FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }), "表格2.xlsx"); } } catch (e) { if (typeof console !== "undefined") console.log(e, wbout); } return wbout; }