vue、elementUI表格导出excel功能

1. 安装两个依赖

npm install --save xlsx file-saver

2.给需要导出的表格添加

id="out-table"

3.在使用导出功能的页面引入插件

import FileSaver from "file-saver";
import XLSX from "xlsx";

4.编写导出方法

//定义导出Excel表格事件
        exportExcel() {
        /* 导出时使用原始格式，解决身份证手机号导出时变为科学计数法 */
        let xlsxParam = {raw:true}
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);
        /* 获取二进制字符串作为输出 */
        let wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "yyjl.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        },

遇到的问题解决方案：

1. 由于获取的数据做了分页处理，导出时只能导出当前页？
   解决：添加一个专用于导出的表格在页面隐藏，点击导出时使用当前查询条件查询全部数据（不分页），再进行导出

2. 导出时只导出了表头，无数据？
   解决：获取全部数据后导出操作添加延时定时器setTimeout(()=>{this.exportExcel()},500)

3. 导出时身份证号、手机号等数据显示为科学计数法
   解决： /* 导出时使用原始格式，解决身份证手机号导出时变为科学计数法 */ let xlsxParam = {raw:true} let wb =
   XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);