element-ui table 导出Excel 封装 VUE 版本

• 话不多说直接上代码
• • 使用方式：
  • 标题html
  • 给table添加id
  • javascript

话不多说直接上代码

第一步引入（导出Excel表格依赖 ）

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

然后在项目目录建立一个 工具类

然后添加 js 文件

代码如下：

// 引入导出Excel表格依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";

/**
 * 
 * @param {String} Element //表格元素ID
 * @param {String} bookType //输出文件类型
 * @param {String} type //输入类型
 * @param {String} fileName //文件名称
 * @returns 
 */

/**
 * 说明：
 * 1.Blob 对象表示一个不可变、原始数据的类文件对象。
 * 2.Blob 表示的不一定是JavaScript原生格式的数据。
 * 3.File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
 * 4.返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
 * 
 * 用法：
 * 1.Element 表格元素ID
 * 2.bookType 输出文件类型，默认 xlsx
 * 3.type 输入类型，默认 array
 * 4.fileName 文件名称 默认 ParkingMonthTransaction
 */

// 导出数据
export function xlExport(Element,bookType,type, fileName) {
    /* 从表生成工作簿对象 */
    
    if(!Element){
        console.error("请添加元素ID");
        return;
    }
    
    //导出Excel并解决数字列科学计数法问题
    let xlsxParam = { raw: true };

    let wb = XLSX.utils.table_to_book(document.querySelector(Element),xlsxParam)
    /* 获取二进制字符串作为输出 */
    var wbout = XLSX.write(wb, {
        bookType: bookType || 'xlsx',
        bookSST: true,
        type: type || 'array'
    })
    try {
        FileSaver.saveAs(
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            fileName && bookType? `${fileName}.${bookType}` :  `表格.xlsx`
        )
    } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
    }
    return wbout
}

使用方式：

标题html

 
<button @click="exportExcel">导出</button>

给table添加id

<el-table id="out-table" :data="tableData" >
  这是代码块
</el-table>

javascript

//导入  
import { xlExport } from "@/utils/export";

methods：{
	//定义导出Excel表格事件
    exportExcel() {
      xlExport(
        "#out-table",
        "xlsx",
        "array",
        this.merchant ? `${this.merchant}流水` : "商家流水"
      );
    },
}

后面的参数可以没有（可以默认） 但 dom ID 必须要有