vue+elementui表格导出为Excel文件

1、安装依赖:npm install --save xlsx file-saver

2、在放置需要导出功能的组件中引入

import FileSaver from 'file-saver'

import XLSX from 'xlsx'

3.导出excel表格事件

  //定义导出Excel表格事件
    exportExcel() {
      let xlsxParam = { raw: true }; //转换成excel时,使用原始的格式
      / generate workbook object from table /;
      /* 从表生成工作簿对象 */
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#projectTab"),  //elementui 表格的id
        xlsxParam
      );

      /* 获取二进制字符串作为输出 */
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象,其内容由参数中给定的数组串联组成。
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }

4.可能还会遇到以下问题

(一)如果存在分页,导出时却只导出当前table绑定的数据,假如我们设置的table每页只有10条数据,导出时只导出了10条,并非所有符合条件的数据

原因:此插件只导出当前table中所有的数据

解决办法:在HTML代码中再加一个el-table标签,这个table专门用来导出数据,且此table一直隐藏着,当查询条件发生变化时,根据后台返回的所有符合条件的数据总量total值,然后重新设置获取后台数据方法的参数,拉取到所有符合条件的数据绑定进来,这样导出的就是想要的数据了。

(二)第一次导出时,导出的excel表格只有表头,没有数据内容

解决方法:给导出到excel表格的函数exportExcel()设置一个延时执行即可,因为刚开始我没有设置延时执行,拉取到数据后直接赋值给了绑定到table上的exportData上,然后就立即调用exportExcel()导致,我猜测exportData渲染到table是需要一定时间的,这段时间内我们立即调用exportExcel()时,数据还没被渲染进去,此时exportExcel()拿不到数据,故此第一次导出的表格中没有数据

(三)导出的数据出现两份的情况

原因:因为element ui下的el-table被渲染出来后有两个table标签,目的是方便进行数据交互使用,所以如果el-column存在fixed属性时,导出时会出现两份数据的情况

解决方法:我是参照上面大佬的文章,直接将隐藏table中的el-table-column上的fixed属性去掉,毕竟这个table是隐藏起来的,直接去掉el-table-column上的fixed属性最便捷

(四)导出的excel表格,如果出现数字字符比较长的,在导出表格中会变成科学计数那样的情况

解决方法:即上面exportExcel()方法中的前面第二和第三行,已经做了说明

  let xlsxParam = { raw: true }; //转换成excel时,使用原始的格式
      /* 从表生成工作簿对象 */
  let wb = XLSX.utils.table_to_book(
        document.querySelector("#projectTab"),  //elementui 表格的id
        xlsxParam
      );
相关推荐

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页

打赏作者

尚憨憨

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值