element ui 导出excel (无后端操作)

一.下载

npm install  xlsx@^0.16.0 --save

npm install  file-saver@^2.0.2 --save

 二.导入

import FileSaver from "file-saver";

import XLSX from "xlsx";

三. 定义导出的数据标识

在表格中添加 id 属性 并起个名称  out-table

 四.绑定按钮及方法

 <el-button slot="append" icon="el-icon-menu" @click="getExcel()" />

五.方法导出

getExcel() {
      //定义导出Excel表格事件
        var xlsxParam = { raw: true };
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(
          document.querySelector("#out-table"),
          xlsxParam
        );
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array",
        });
        try {
          FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "sheetjs.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    }