vue 集成file-saver和xlsx 实现前端表格导出

1.npm安装

npm install xlsx --save
npm install file-saver --save

2.创建export.js

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

export default {
  /*
  *导出Excel表格
  *name--导出文件名
  *tableName--导出表id（#id）
  *示例  this.myExport('行驶数据明细','#myTable',17)
  */
  exportExcel(name, tableName) {
    var myName = name + '.xlsx'
    var xlsxParam = { raw: true } //数据不转换格式
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName), xlsxParam)

    var selIn = XLSX.write(sel, { bookType: 'xlsx', bookSST: true, type: 'array' })
    try {
      FileSaver.saveAs(new Blob([selIn], { type: 'application/octet-stream' }), myName)
    } catch (e) {
      if (typeof console !== 'undefined') console.log(e, selIn)
    }
    return selIn
  }
}

3.补充
（1）若想导出多个sheet页，可用如下workbook替换sel

 let workbook = XLSX.utils.book_new();
 let ws1 =XLSX.utils.table_to_sheet(document.querySelector('#tableId1'), xlsxParam);
 let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#tableId2'), xlsxParam);
// 这里可以添加多个sheet页
 XLSX.utils.book_append_sheet(workbook, ws1, 'Excel名称');
 XLSX.utils.book_append_sheet(workbook, ws2, 'Excel名称');

（2）过滤导出列
实现思路，在导出前，将不想导出列隐藏(v-if)，再在this.$nextTick中实现导出，在导出后，恢复隐藏列
(3) 此方法只能导出当前页