vue将table数据导出为execl文件(学习篇)

1、首先在src下新建文件夹vender，将Export2Excel.js和Export2Zip.js文件放到vender文件夹下。这两个js文件可以在我的博客资源中免费下载。0积分下载

2、定义一个点击事件

<el-button size="mini" class="btn-add" @click="handleDownload()">导出Excel</el-button>

3、data中初始化一些数据

filename: "单点订单信息",//这个是导出后execl文件的名称
autoWidth: true,
bookType: "xlsx",//这个是execl的文件格式
singleArray:[],//接口请求到要导出的数据

4、引入js文件，进行下载操作

 // 导出Excel
    handleDownload() {
    //引入刚才下载的Export2Excel.js文件
      import("@/vendor/Export2Excel").then((excel) => {
        // 设置表头(就是导出后，execl的中文名字)
        const tHeader = [
          "订单号",
          "终端",
          "产品",
          "商品名称",
          "下单用户",
          "下单时间",
          "付款时间",
          "实付金额(元)",
          "付款方式",
          "订单状态",
        ];
        // 列表表头(请求到接口对应的中文名字，英文和上面中文要对应)
        const filterVal = [
          "orderNo",
          "termiCode",
          "prodCode",
          "productName",
          "userId",
          "createTime",
          "payTime",
          "totalFee",
          "payType",
          "status",
        ];
        // 深拷贝，不改变原有数组，防止列表数据NaN，有需要翻译的执行下面代码
        let _tmp = JSON.stringify(this.singleArray); //将对象转换为json字符串形式
        let result = JSON.parse(_tmp); //将转换而来的字符串转换为原生js对象
        // 处理数据(接口有的数据需要翻译，如果不进行翻译，导出后execl就是请求到的数据)
        result.forEach((v) => {
          Object.assign(v, {
          //这里就是对数据进行处理
            createTime: formatDate(v.createTime),
            payTime: formatDate(v.payTime),
            payType: isPayType(v.payType),
            status: isStatus(v.status),
            totalFee: isTotalFee(v.totalFee)
          });
        });
        // 处理后的数据，没有要翻译的，直接将data中的singleArray赋值给list
        const list = result;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename,
          autoWidth: this.autoWidth,
          bookType: this.bookType,
        });
      });
    },
    // 将时间转化成字符串
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === "createAt") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },

5、效果图如下，因为我导出好多次了，所以名称后面加数字了