在vue中，使用xlsx配合FileSaver进行导出excel表格

此种方式适合于直接导出，不对样式进行更改。

使用这两个插件，简单的实现如下表格：

 效果：

 1. 使用npm 下载插件:

npm i xlsx
npm i file-saver

2. 在组件中导入：

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

XLSX 这样导入之后，在使用时我报了如下错误：

 Cannot read properties of undefined (reading 'utils')"

所以将 XLSX 的导入方式改为：

import * as XLSX from 'xlsx'

3. 准备工作完毕，接下来就是导出的代码了

exportTable(){
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam) // #exportTab 是要导出的表格的id
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '导出的表的名称.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
    }

到此就可以完美的导出表格了，不过导出的表格不太好看，第一次接触这类东西，如有错误，请留言批评改正。