vue2.5 + element UI el-table 导出Excel

安装依赖

npm install --save xlsx file-saver

新建excelHelper.js

\src\utils\目录下新建excelHelper.js文件

import Vue from 'vue'

import FileSaver from "file-saver";

import XLSX from "xlsx";

export default {

    /**

     * @param tableId 要导出的表格ID

     * @param fileName 文件导出名称

     * @param fileType 文件类型

     * @param rawFlag - true 导出的内容只做解析，不进行格式转换

     * @returns {*}

     */

    exportExcel(tableId,fileName,fileType,rawFlag) {

        let fix = document.querySelector('.el-table__fixed');

        let wb;

        /* 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去 */

        if(fix){

            wb = XLSX.utils.table_to_book(document.querySelector("#"+tableId).removeChild(fix),{raw:rawFlag});

            document.querySelector("#"+tableId).appendChild(fix);

        }else{

            wb = XLSX.utils.table_to_book(document.querySelector("#"+tableId),{raw:rawFlag});

        }

        /* 获取二进制字符串作为输出 */

        let 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" }),

                //设置导出文件名称

                fileName + fileType

            );

        } catch (e) {

            if (typeof console !== "undefined") console.log(e, wbout);

        }

        return wbout;

    }

}

调用

在需要使用导出的页面中引用excelHelper.js

import excelHelper from "@/utils/excelHelper";

按钮调用

excelHelper.exportExcel("table","fileName",".xls",true);

其中，table是为表格绑定的id，fileName是导出的文件名称，.xls是导出的文件类型，true指明导出的内容只做解析不进行格式转换

填坑指南

el-table数据导出Excel数据重复两遍

原因：el-table的fixed属性来让某一列固定，但elementui的实现方式是：创建了两个tabledom，通过一个隐藏一个显示来实现交互效果，当导出整个el-table 就会将两个div内的table都导出，导致数据重复
解决方式：

  let fix = document.querySelector('.el-table__fixed');

  let wb;

  //判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去

  if(fix){

    wb = XLSX.utils.table_to_book(document.querySelector('#table').removeChild(fix));

    document.querySelector('#table').appendChild(fix);

  }else{

    wb = XLSX.utils.table_to_book(document.querySelector('#table'));

  }

巴特西

vue2.5 + element UI el-table 导出Excel

安装依赖

新建excelHelper.js

调用

填坑指南

el-table数据导出Excel数据重复两遍

最新文章

热门文章