解决ElementUI的Table在有fixed列时使用xlsx导出数据重复的问题

原因

ElementUI的table中，如果使用了fixed的列，则会把table的内容复制一份（如果两边都有fixed列则是两份）出来进行UI的排列，这样的情况下，如果用xlsx来导出该表格，则实际导出的数据则是多份数据。

解决

因为数据表格被复制了多份，所以我们可以在导出的时候使用dom来选择其中一份数据进行导出，或者使用js复制一份table，然后在复制对象中移除掉因为fixed而多出来的数据，再进行导出即可。

示例

// 传入表格的 domId
exportTable (tableId) {
  let table = document.getElementById(tableId)
  if (!table) return
  // 复制一份table的dom
  let div = document.createElement('div');
  div.innerHTML = table.innerHTML
  // 移除掉左右的fixed
  let fixedLeft = div.querySelector('.el-table__fixed')
  if (fixedLeft) fixedLeft.remove()
  let fixedRight = div.querySelector('.el-table__fixed-right')
  if (fixedRight) fixedRight.remove()
  // 导出处理好的数据
  let book = XLSX.utils.table_to_book(div)
  let write = XLSX.write(book, {bookType: 'xlsx', bookSST: true, type: 'array'})
  try {
    FileSaver.saveAs(new Blob([write], { type: 'application/octet-stream' }), '表格数据.xlsx');
  } catch (e) {
    console.log('导出失败', e)
  }
}

相关

• ElementUI element.eleme.cn
• xlsx(SheetJS): sheetjs.com