在vue.js中导出Excel表格

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

 

下载Blob.js和Export2Excel.js，在src目录下新建vendor文件夹，里面放入Blob.js和Export2Excel.js两个JS文件

 

这个两个js文件https://download.csdn.net/download/qq_42092177/11996935

 

 

<el-button
                    type="primary"
                    @click="downlaodHandler"
                    :loading="downloadLoading"
                  >导出Excel表</el-button>

//导出excel
    async downlaodHandler() {
      let listData = await this.getTabaleList(); //拿到后台返回的数据
      this.downloadLoading = true;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        const tHeader = [
          "序号",
          "姓名",
          "性别",
          "上报类型",
          "上报时间",
          "职称",
          "手机号码",
          "学院",
          "规划表录入情况",
          "规划完成情况",
          "规划年份",
          "职业更新情况",
          "学院审核",
          "学校审核"
        ];
        const filterVal = [
          "id",
          "user_name",
          "gender",
          "ctype",
          "report_time",
          "job",
          "mobile",
          "org_name",
          "plan",
          "finished_rate",
          "plan_year",
          "updata",
          "college_re",
          "school_re"
        ];
        const data = this.formatJson(filterVal, listData);
        export_json_to_excel(tHeader, data, "职业规划统计表");
        this.downloadLoading = false;
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "ctype") {
            return this.evaluation[v[j]].name;
          } else if (j === "finished_rate") {
            return v[j] + "%";
          } else if (j === "gender") {
            return v[j] === "1" ? "男" : "女";
          } else {
            return v[j];
          }
        })
      );
    },