直接导出 html table 数据，此方法只能将页面所展示的数据导出，如果表格有分页则不行。
若展示数据太多导致页面卡顿，使用 vxe-edit-table 优化性能，会通过滚动动态加载 tr 元素，则导致导出不完全。
所以直接导出数据是一个不错的选择。
一、安装依赖
npm install file-saver
npm install xlsx
二、在项目中新建一个 excel 文件夹，放入 Export2Excel.js 文件。
Export2Excel.js 文件 Export2Excel.js
三、导出数据
exportExcel () {
import('@/assets/js/excel/Export2Excel').then(excel => {
const tHeader = ["姓名", "年龄", "..."]; // 导出的excel表头名信息
const filterVal = ["name", "age", "..."]; // 导出的excel表头字段名
const list = this.dataList; // 需要导出数据
const data = this.formatJson(filterVal, list) // 格式转换
excel.export_json_to_excel({
header: tHeader, // 表头
data, //数据
filename: "实时数据", // 文件名称
autoWidth: true, // 宽度自适应
})
})
},
//格式转换
formatJson(filterVal, jsonData) {
return jsonData.map(v => filterVal.map(j => v[j]));
}
