1. 安装依赖 //xlsx 与 file-saver依赖 npm install --save xlsx file-saver 2.在需要的组件中引入 import FileSaver from 'file-saver' import * AS XLSX from 'xlsx' <el-table :data="checkOrderList" border id="out-table"> //表格内容 </el-table> <el-button type="primary" @click="exportExcel">点击导出</el-button> 4.methods中引入方法 exportExcel (id,title) { /* generate workbook object from table */ var wb = XLSX.utils.table_to_book(document.querySelector(#out-table)) /* get binary string as output */ var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' }) try { FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title+'.xlsx') } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) } return wbout } 5.重复数据问题和分页 若是表格有固定在页面右侧的列,需要去掉fixed效果,选择器是.el-table__fixed-right,再到后面append上去;若是表格有固定表头,选择器是.el-table__fixed,不然会导致数据导出两遍。 若是表格有分页,我把表格的不分页的全部数据拿到(pageSize设置一个很大的数,如:1000000),在点击导出时将数据渲染到需要导出数据的表格中,等到导出完成后,再把之前的分页数据换过来。
解决方法: exportExcel() { const data = this.checkOrderList this.checkOrderList = this.allCheckOrderList // 把不分页的所有数据都渲染到表格中 const fix = document.querySelector('.el-table__fixed') let wb this.$nextTick(() => { if (fix) { // 判断要导出的节点中是否有fixed的表格,如果有,转换excel时先将该dom移除,然后append回去 wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix)) document.querySelector('#out-table').appendChild(fix) } else { wb = XLSX.utils.table_to_book(document.querySelector('#out-table')) } const 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') console.log(e, wbout) } this.checkOrderList = data // 恢复表格的分页数据 return wbout }) },