依赖安装（file-saver、xlsx）
npm install file-saver --save-dev
npm install xlsx --save-dev
导出封装
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
exportExcel(id, title) { // 参数 id:dom；title:导出的文件名
/* generate workbook object from table */
const wb = XLSX.utils.table_to_book(document.querySelector(id));
/* get binary string as output */
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout;
}
调用
<template>
<!-- 点击事件 设置参数('#outTable', '请假统计.xlsx') -->
<el-button type="primary" size="small" @click="exportExcel('#outTable', '请假统计.xlsx')">导出</el-button>
<!-- 设置table的 id="outTable" -->
<el-table :data="tableList" id="outTable"></el-table>
</template>
<script>
// 引用封装的函数
</script>
遇到问题
在使用中，有导出身份证号的需求，导出来的身份证号字段会失去精度(后几位为0)
解决方法
设置转换成excel时，使用原始的格式
XLSX.utils.table_to_book(document.querySelector(id), { raw: true })
exportExcel(id, title) {
/* generate workbook object from table */
let xlsxParam = { raw: true }; // 转换成excel时，使用原始的格式
const wb = XLSX.utils.table_to_book(document.querySelector(id),xlsxParam);
/* get binary string as output */
const wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
try {
FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), title)
} catch (e) {
if (typeof console !== 'undefined') console.log(e, wbout)
}
return wbout;
}
