1.安装依赖
npm install --save xlsx file-saver
2.在放公共方法的文件下引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
3.在放公共方法的js文件下写
Vue.prototype.exportExcel = function(name){//导出excel
let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'));
let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), name+'.xlsx')
} catch (e) {
if (typeof console !== 'undefined')
console.log(e, wbout)
}
return wbout
}
4.在导出按钮引入exportExcel方法
<el-button icon='el-icon-document' :size='tableConfig.size' @click="exportExcel('订单统计')">导出</el-button>
注意:
XLSX.utils.table_to_book(放入的是table的dom节点),name:传入的导出表格的名称
若表格内容使用fixed会打印出重复的数据,使用fixed的元素会另生成一个table结构。