Element table 导出Excel重复数据

一、说明

    使用Element组件的table实现固定列时，在前端页面导出table数据为Excel时，可以使用xlsx插件或bootstrap-table插件时，导出的数据会出现两份一样的数据。

二、这是什么原因呢？看下图：

    从图中web代码中可见Element组件在实现table固定列时，会生成两个table，当我们导出Id下的table为excel时，就会导出两份数据。

三、解决方法

    在导出Excel之前，将固定列的重复table删除，在导出完成后，再将固定列table拼接还原。下面使用xlsx插件实现，需引入xlsx插件和FileSaver插件。

 //判断有无固定列table
 var fixTable = document.querySelector('.el-table__fixed');
 if (fixTable ) {
	//有固定列，先删除固定列的Table
    document.querySelector('#tb_user').removeChild(fixTable );
    //导出数据
    var elt = document.getElementById('tb_user');
    var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});
    return dl ? XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) :
     XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
    //导出数据完成，恢复固定列
    document.querySelector('#tb_user').appendChild(fixTable );
 } else {
   //没有固定列table 直接导出Excel
   var elt = document.getElementById('tb_user');
   var wb = XLSX.utils.table_to_book(elt, {sheet: "Sheet JS"});
   return dl ?XLSX.write(wb, {bookType: type, bookSST: true, type: 'base64'}) :
    XLSX.writeFile(wb, fn || ('test.' + (type || 'xlsx')));
}

    使用bootstrap table实现，需要引入bootstrap系列插件包括tableExport插件：

 var fixTable = document.querySelector('.el-table__fixed');
 if (fixTable ) {
     document.querySelector('#tb_user').removeChild(fixTable );
     $('#tb_user').tableExport({
         type: 'excel',
         fileName: '导出文件名称',
         onCellHtmlData: function (cell, row, col, data) {
             return data;
         }
     });
     document.querySelector('#tb_user').appendChild(fixTable );
 } else {
     $('#tb_user').tableExport({
         type: type,
         fileName: fileName,
         onCellHtmlData: function (cell, row, col, data) {
             return data;
         }
     });
 }