纯前端实现复杂表格数据的导出——XLSX+FileSaver

项目场景：

一个很复杂的表格，行列都涉及到合并单元格，且列数不固定，是根据后端数据返的，样式如下，需要实现该表格的导出：

使用步骤

1.安装相关依赖 XLSX 和 FileSaver：

npm install xlsx --save
npm install FileSaver --save

2.代码中引入：

  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

3.代码中使用：

 <el-button type="primary" @click="exportExcel" >导出el-button>
     
    <el-table id="a2"  
      :data="dataList"
      border stripe 
      :span-method="arraySpanMethod"
      :height="tableHeight"
      style="width: 100%">
      <el-table-column 
        v-for="item in tableColumnList" 
        :key="item.columnKey" 
        header-align="center" 
        align="center"
        :prop="item.columnKey" 
        :label="item.columnName" 
        :width="item.width">
      el-table-column>
    el-table>

exportExcel () {
        var wb = XLSX.utils.table_to_book(document.querySelector('#a2'),{ raw: true })//获取table的元素
        var wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(
            new Blob([wbout], {type: 'application/octet-stream'}),
            this.filename+'.xlsx'
          )
        } catch (e) {
          alert('导出失败!')
        }
      },

总结：

仅使用 XLSX 的简单的表格导出也记录一下：

  // 导出，headers导出表头，datas导出字段内容，fileName保存的文件名（不含后缀）
  // Excel.export(['名称','年龄'], [['张三',10],['李四',20]], '导出')
  export(headers, datas, fileName, sheetName  = 'Sheet1') {
    const tableData  = [headers]
    datas.forEach(data => { tableData.push(data) })
    let ws = XLSX.utils.aoa_to_sheet(tableData)
    let wb = XLSX.utils.book_new()
    XLSX.utils.book_append_sheet(wb, ws, sheetName) // 工作簿名称
    XLSX.writeFile(wb, fileName+'.xlsx') // 保存的文件名
  }

写博客是为了记笔记！