当前位置: 首页 > Web前端 > vue.js

将elementUI中的el-table数据导出到Excel

时间:2023-04-01 00:59:01 vue.js

1.安装依赖npminstall--savexlsxfile-saver2.在需要导出excel的文件中引入依赖3.在methods中写一个导出方法exportExcel(excelName){//excelName--设置名称oftheexportedexcel//report-table--要导出的el-table对应的ref名称try{const$e=this.$refs['report-table'].$el;//如果表加了fixed属性,导出文件会产生两份相同的数据,所以这里可以判断let$table=$e.querySelector('.el-table__fixed');如果(!$table){$table=$e;}//对于返回Cell原始字符串,设置{raw:true}constwb=XLSX.utils.table_to_book($table,{raw:true});constwbout=XLSX.write(wb,{bookType:'xlsx',bookSST:true,type:'array'});FileSaver.saveAs(newBlob([wbout],{type:'application/octet-stream'}),`${excelName}.xlsx`,);}catch(e){if(typeofconsole!=='undefined')console.error(e);}},4.参考文档https://blog.csdn.net/u010427...https://github.com/SheetJS/js-xlsxhttps://github.com/eligrey/FileSaver.js