vue导出Excel文件(入门篇)

1、在src目录下创建一个目录vendor,放入Blob.js和Export2Excel.js

2、安装相关组件
  npm install -S file-saver 用来生成文件的web应用程序
  npm install -S xlsx 电子表格格式的解析器
  npm install -D script-loader 将js挂在在全局下

3、修改js文件中地址

  

 4、使用

  在相关组件中引入(好像不引入也可以,之前已经挂在全局)

import Blob from "@/vendor/Blob";
import Export2Excel from "@/vendor/Export2Excel.js";
    //导出Excel
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        //头
        const tHeader = ["编号", "姓名", "时间"];
        //对应的标签
        const filterVal = ["id", "name", "date"];
        //标签对应的内容  是一个数组结构
        const list = this.tableData;
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "销售报表");
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    }
    //导出结束

  按钮触发该方法:

<el-button type="warning" @click="export2Excel">
    <i class="el-icon-upload2"></i>&nbsp;导出Excel
</el-button>
原文地址:https://www.cnblogs.com/116970u/p/13751395.html