vue+elementui项目中实现纯js导出excel

1.后台管理表格导出excel
本来是后端导的，因为跨域的问题，频频出错，所以只能自食其力，纯js实现excel的导出。

首先npm安装依赖

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

在src目录下新建excel文件夹，里面放入Blob.js和Export2Excel.js两个JS文件
链接: https://pan.baidu.com/s/1b7b23xX-XWQmvYUIhPFouA 密码: vxdi

接下来main.js引入

import Blob from "@/tools/Blob.js"
import Export2Excel from "@/tools/Export2Excel"

注意在Export2Exce.js中引入自己的路径

2.将数据导出
2.1首先请求后台数据

 // 根据id初始化table
    handleNodeClick(data) {
      this.user_id = data.id;
      let url = "api";
      this.$http
        .get(url, {
          params: {
            id: this.user_id
          }
        })
        .then(res => {
          this.tableData = res.data;
        })
        .catch(function(res) {});
    },

这是后端返回来的字段。

 //导出excel的信息集合
    export2Excel() {
      require.ensure([], () => {
        const { export_json_to_excel } = require("../apis/Export2Excel.js");  //此处需要修改为自己的正确路径
        // 设置自己的excel表头
        const tHeader = [
          "序号",
          "姓名",
          "电话",
          "楼盘",
          "录入时间",
          "录入人",
          "跟进时间",
          "操作"
        ]; // 上面设置Excel的表格第一行的标题
        const filterVal = [
          "client_id",
          "client_name",
          "client_phone",
          "enterer_id",
          "enterer_time",
          "estate_name",
          "follow_up_time",
          "user_name"
        ]; // client_id client_name client_phone 为tableData的属性
        const list = this.tableData; //把data里的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]));
    }

成功…