Vue开发小记:前端直接导出表格为excel

首先安装依赖：

npm install --save xlsx file-saver

组件中引入：

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

然后在页面上添加导出按钮，导出方法绑定到table对象：

<!-- 前端直接导出xlsx -->
    <a-button
      style="margin-left: 10px"
      @click="outTab"
    >导出</a-button>
    <a-table
      id="out-table"
      bordered
      :rowKey="(record) => record.id"
      ref="table"
      :columns="columns"
      :dataSource="data"
      showPagination="auto"
      :pagination="{
        showQuickJumper: true,
          pageSize: 10,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100'],
          showTotal: (total, range) => `共 ${total} 条`
      }"
    >
    </a-table>

注意在table上绑定id="out-table"

接下来就是按钮绑定的导出方法了:

outTab () {
      let fix = document.querySelector('.el-table__fixed')
      let wb
      if (fix) {
        wb = XLSX.utils.table_to_book(document.querySelector('#out-table').removeChild(fix))
        document.querySelector('#out-table').appendChild(fix)
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
      }
      let wbout = XLSX.write(wb, {
        bookType: 'xlsx',
        bookSST: true,
        type: 'array'
      })
      try {
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          'file.xlsx'
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.log(e, wbout)
      }
      return wbout
    }

点击按钮，table中显示的内容就被导出了