1.安装依赖//xlsx和file-saver依赖npminstall--savexlsxfile-saver`https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js2引入importFileSaverfrom'file-saver'importXLSXfrom'xlsx'3。.vue://表格内容点击export4.methods引入方法exportExcel(id,title){/*从表生成工作簿对象*/varwb=XLSX.utils.table_to_book(document.querySelector(#out-table))/*获取二进制字符串作为输出*/varwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'})try{FileSaver.saveAs(newBlob([wbout],{type:'application/octet-stream'}),title+'.xlsx')}catch(e){if(typeofconsole!=='undefined')console.log(e,wbout)}returnwbout}这个表即可exported5.重复数据问题和分页如果表格固定在page列右边，需要去掉固定效果，selector为.el-table__fixed-right，后面追加；如果是一张桌子表头是固定的，选择器是.el-table__fixed，否则会导出两次数据。如果表格有分页，我会在不分页的情况下获取表格中的所有数据（pageSize设置为一个很大的数字，比如：1000000），点击export时，数据会渲染到需要数据的表格中导出，导出完成后会替换之前分页的数据。解决方案：exportExcel(){constdata=this.checkOrderListthis.checkOrderList=this.allCheckOrderList//渲染所有数据而不分页到表中constfix=document.querySelector('.el-table__fixed')letwbthis.$nextTick(()=>{if(fix){//判断要导出的节点中是否有固定的表，如果有，则在转换excel时去掉dom，然后追加回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'))}constwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'})try{FileSaver.saveAs(newBlob([wbout],{类型:'application/octet-stream'}),'flowtable.xlsx')}catch(e){if(typeofconsole!=='undefined')console.log(e,wbout)}this.checkOrderList=data//恢复表的分页数据returnwbout})},
