需求：前端对el-table表格导出

插件：

npm install xlsx -S

npm install file-saver –save

原理：直接导出el-table的表格里面的数据，这样就会存在缺点，只会导出当前页面的数据，如果需要导出全部数据，可以自己重新渲染一个全部数据不可见的el-table表格，来导出就可以了

扩展：经过测试，不止el-table表格可以导出，各种各样的ui组件的表格都可以导出，例如，vxe-table,vant这些组件表格一样可以导出，只要表格

,

等这些标签，都可以导出

导出import FileSaver from 'file-saver'import XLSX from 'xlsx'export default {name: 'project',data() {return {tableData: [{date: '2016-05-03',name: '王小虎',province: '上海',city: '普陀区',address: '上海市普陀区金沙江路 1518 弄',zip: 200333}]}},components: {},watch: {},methods: {exportExcel(excelName) {try {//获取表格const $e = this.$refs['report-table'].$ellet $table = $e.querySelector('.el-table__fixed')if(!$table) {$table = $e}const wb = XLSX.utils.table_to_book($table, {raw:true})const wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST:true, type: 'array'})FileSaver.saveAs(new Blob([wbout],{type: 'application/octet-stream'}),`${excelName}.xlsx`,)} catch (e) {if (typeof console !== 'undefined') console.error(e)}}},mounted () {}}

问题：导出的Excel表格数据重复，原因是el-table的fixed属性来让某一列固定

exportExcel() {var xlsxParam = { raw: true }; // 导出的内容只做解析，不进行格式转换let fix = document.querySelector(".el-table__fixed");//如果是都给了fixed样式let fix = document.querySelector(".el-table__fixed-right");//如果是只有右边有fixed样式let wb;if (fix) {//判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去wb = XLSX.utils.table_to_book(document.querySelector("#educe-table").removeChild(fix),xlsxParam);document.querySelector("#educe-table").appendChild(fix);} else {wb = XLSX.utils.table_to_book(document.querySelector("#educe-table"),xlsxParam);}var wbout = XLSX.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([wbout], { type: "application/octet-stream" }),"商户列表.xlsx");} catch (e) {if (typeof console !== "undefined") {}}return wbout;},

表格

导出的excel文件