Vue导出Excel表格的两种操作方式（基于HTML结构、基于JSON对象）

1.基于HTML结构导出

安装依赖并导入

npm install --save xlsx file-saver
// 然后在组件引入
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

在methods里新增导出方法

//定义导出Excel表格事件
    exportExcel() {
      /* 从表生成工作簿对象 获取表格的ID */
      var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"));
      /* 获取二进制字符串作为输出 */
      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" }),
          //设置导出文件名称
          "Excel.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

调用 exportExcel() 方法即可导出Excel

2.基于JSON对象导出

同样需要先安装依赖

npm install --save xlsx file-saver
npm install -D script-loader

下载 Blob.js 、Export2Excel.js并在src下创建一个utils文件夹后放入
如果你找不到下载地址可以点这里

修改Export2Excel.js文件里的导入路径

//Export2Excel.js
/* eslint-disable */
require("script-loader!file-saver");
require("./Blob.js"); //转二进制用  这边要写你的blob的实际地址
require("script-loader!xlsx/dist/xlsx.core.min");

function generateArray(table) {
// ......

在methods里新增导出方法

    // 定义导出Excel表格事件
    exportExcel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/utils/Export2Excel"); //注意这个是Export2Excel路径
        const tHeader = ["ID", "姓名", "邮箱", "电话", "角色", "状态"]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "id",
          "username",
          "email",
          "mobile",
          "role_name",
          "mg_state"
        ]; // 上面是tableData里对象的属性key值
        const list = this.userlist; //把要导出的数据tableData存到list
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "Excel"); //最后一个是表名字
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

调用 exportExcel() 方法即可导出Excel