前端vue+elementui导出复杂（单元格合并，多级表头）表格el

2024-07-16 22:25| 来源: 网络整理| 查看: 265

需求：前端对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'].$el let $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文件

【本文地址】

公司简介

联系我们