记element + xlsx 导出表格数据重复的坑

在使用elementui做管理平台时遇到导出表格的需求，网上有很多解决方案，最多的就是使用xlsx + FileSaver 将页面上的表格转换成excel book。

// 安装xlsx filesaver
$ npm install --save xlsx file-saver
复制代码

// js 代码
import FileSaver from 'file-saver';
import XLSX from 'xlsx';

// id为要导出的table节点id（父节点也可以），title是导出的表格文件名
export const exportTb = (id, title) => {
  /* generate workbook object from table */
  var wb = XLSX.utils.table_to_book(document.querySelector(id));
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: 'application/octet-stream'
      }),
      title
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
};
复制代码

以上 是不是很简单！表格就导出了！但是！！！

我竟然在导出一份表格的时候发现 ！一样的数据导了两遍？？

把所有的数据全部都查了一遍发现，我的数据没有重复，展示的table也无重复，再查看element table生成的代码发现：

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

所以我针对这种情况又做了以下处理：

export const exportTb = (id, title) => {
  /* generate workbook object from table */
  // 判断要导出的节点中是否有fixed的表格，如果有，转换excel时先将该dom移除，然后append回去，
  var fix = document.querySelector('.el-table__fixed');
  var wb;
  if (fix) {
    wb = XLSX.utils.table_to_book(document.querySelector(id).removeChild(fix));
    document.querySelector(id).appendChild(fix);
  } else {
    wb = XLSX.utils.table_to_book(document.querySelector(id));
  }
  /* get binary string as output */
  var wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], {
        type: 'application/octet-stream'
      }),
      title
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
};
复制代码

上述操作用户没有感知，只是在转换时先移除，下一步append，其实直接导出fixed的table也可以，但是不能够兼容其他页面没有使用fixed的表格。所以最终解决方案就是这样。有更好的解决方案欢迎提供~

注意：本文出自 www.inmwang.com，如果要转载本文章，请与作者联系！

并注明来源: www.inmwang.com/detail/5

转载于:https://juejin.im/post/5c3407a0f265da6170074bd6