vue 导出excel使用笔记

开心就好1314520

已于 2024-06-05 09:49:42 修改

阅读量251

点赞数

文章标签： vue.js javascript 前端

于 2022-09-16 16:14:47 首次发布

本文链接：https://blog.csdn.net/qq_38388578/article/details/126892806

版权

本文介绍了如何在使用element UI的表格组件配合xlsx库导出Excel时，处理带有fixed属性的列导致数据重复的问题。通过复制表格DOM并移除多余fixed部分，确保正确生成工作簿对象并成功保存为xlsx文件。

摘要由CSDN通过智能技术生成

1、安装

cnpm i xlsx  file-saver --save

2、使用

import FileSaver from "file-saver";
import XLSX from "xlsx";

 exportExcel() {
      let xlsxParam = { raw: true };
      let name ='大数据查询列表'
      let  wb={}

      if(this.tableData.length==0){
          return this.$message('暂无数据可导出')
        }
          wb= XLSX.utils.table_to_book(
         document.querySelector("#res_table"),
          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" }),
          //设置导出文件名称
          `${name}${(new Date()).valueOf()}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

3、遇到问题

若el-table列存在fixed属性，导出数据多一倍

 openExecel() {
        let xlsxParam = { raw: true };
        let name ='收费项目统计'
        let  wb={}

        if(this.tableData.length==0){
            return this.$message('暂无数据可导出')
        }
         //因为添加fixed属性，elementUI底层会把table的dom创建两份，通过一份隐藏一份显示来实现交互，我们打印时需要去掉多余的一份el-table__fixed

      let tableEle = document.getElementById('table')
      if (!tableEle) return
       //用div复制一遍要打印的表格dom
       let div = document.createElement('div');
        div.innerHTML = tableEle.innerHTML
        //因为添加fixed属性，elementUI底层会把table的dom创建两份，通过一份隐藏一份显示来实现交互，我们打印时需要去掉多余的一份el-table__fixed
      let fixedLeft = div.querySelector('.el-table__fixed')
      if (fixedLeft) fixedLeft.remove()
      let fixedRight = div.querySelector('.el-table__fixed-right')
      if (fixedRight) fixedRight.remove()
        wb= XLSX.utils.table_to_book(
         div,
          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" }),
          //设置导出文件名称
          `${name}${(new Date()).valueOf()}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    //   download.exportExcel("/api/search/list-cremation-state-list-excel", this.ruleForm, "被火化人员情况登记台卡" + download.getDateTime() + ".xlsx")
    }