安装依赖
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'));
- }
推荐博客:
来源: https://www.cnblogs.com/maggieq8324/p/12051429.html