vue+element-ui 纯前端导出excel文件

纯前端导出表格excel文件
前提：安装依赖

npm install file-saver xlsx -S
// 加载script 需要
npm install script-loader -D

使用流程：
1.在/src 下面添加vendor文件
创建Blob.js Export2Excel.js 如果找不到这两个文件，可以在我的github上下载
2.修改build 里面的webpack.base.conf文件

alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'vendor': path.resolve(__dirname, 'src/vendor')//添加这一行
    }

3.使用

```javascript
 exportExcel() {
      // let sourceOriginAmount = [
      //   {
      //     goodsName: "苹果",
      //     sourceCode: "123"
      //   },
      //   {
      //     goodsName: "香蕉",
      //     sourceCode: "234"
      //   }
      // ]; // 需要导出的数据，可以动态获取
      // this.tableList
      let arrHeader = []; //表头
      let arrType = []; //对应得prop
      this.filterOption.map((item, index) => {
        if (item.checked) {
          arrHeader.push(item.label);
          arrType.push(item.prop);
        }
      });
      this.loading = true; // 设置一个loading，生成Excel需要时间
      import("@/vendor/Export2Excel.js").then(excel => {
        // 导入js模块
        // const tHeader = [
        //   "产品分类",
        //   "课程类型",
        //   "课程名称",
        //   "级别",
        //   "课程开始时间",
        //   "课程结束时间",
        //   "教室"
        // ]; // 导出excel 的标题
        const tHeader = arrHeader; //这里是el-table 的label 因为我的table 还加了筛选所以没有写死
        // const filterVal = [
        //   "product",
        //   "type_name",
        //   "course_name",
        //   "level",
        //   "start_time",
        //   "end_time",
        //   "roomname"
        // ]; // 每个标题对应的字段

        const filterVal = arrType;//对应的prop
        const list = (this.tableList || []).map((item, key) => {
          // 通过 map 方法遍历，组装数据成上面的格式
          return {
            product: item.product || null,
            type_name: item.type_name || null,
            course_name: item.course_name || null,
            level: item.level || null,
            start_time: item.start_time || null,
            end_time: item.end_time || null,
            roomname: item.roomname || null
          };
        });

        if (list) {
          const data = this.formatJson(filterVal, list); // 生成json数据
          excel.export_json_to_excel({
            // 调用excel方法生成表格
            header: tHeader,
            data,
            filename: "表格"
          });
        } else {
          alert("暂无无数据");
        }
        this.loading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

4.把方法加到el-button就可以使用了