解决vue表格导出时数据重复

如果 element-ui的table 使用了 fixed 属性固定列，导出表格时会出现导出两次的问题，在导出的表格中会有重复数据，是因为在 table 中有两个 table 标签，本文章提出解决办法

• 在main.js中

// vue中导出excel表格模板
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

Vue.prototype.$FileSaver = FileSaver //设置全局
Vue.prototype.$XLSX = XLSX //设置全局

• 在.vue文件中

<el-table-column prop="id"  label="单号" fixed="left"></el-table-column>
<el-table-column label="操作" width="120" fixed="right"></el-table-column>

// 表格导出方法 
exportExcel() {
    let tables = document.getElementById('out-table').cloneNode(true) // 重点
    tables.removeChild(tables.querySelector(".el-table__fixed")) // 重点
    table.removeChild(table.querySelector(".el-table__fixed-right")) // 重点
    let table_book = this.$XLSX.utils.table_to_book(tables)
    var table_write = this.$XLSX.write(table_book, {
      bookType: 'xlsx',
      bookSST: true,
      type: 'array',
    })
    try {
      this.$FileSaver.saveAs(
        new Blob([table_write], { type: 'application/octet-stream' }),
        '导出表格名.xlsx'
      )
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, table_write)
    }
    return table_write
  }

以下是对js中重点代码解析

// 拷贝一个table，否则直接删除会删除页面中的表格
let tables = document.getElementById('out-table').cloneNode(true)
// 因为element-ui的表格的fixed属性导致多出一个table，会下载重复内容，这里删除掉
tables.removeChild(tables.querySelector(".el-table__fixed")) // fixed和fixed="left"都是用这个
table.removeChild(table.querySelector(".el-table__fixed-right")) // fixed="right"用这个

修改前：

修改后：