直接导出 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]));

}