vue导出excel

我使用的是Element UI框架的表格没有测试普通表格。

第一步我们先安装一下这两个包file-saver，xlsx

1.  
   npm i file-saver
2.  
   npm i xlsx

第二步引入在main.js里

1.  
   import FileSaver from 'file-saver'
2.  
    
3.  
   import * as XLSX from 'xlsx'

第三步挂载上

1.  
   app.config.globalProperties.$FileSaver = FileSaver //设置全局
2.  
    
3.  
   app.config.globalProperties.$XLSX = XLSX //设置全局

第四步就是在使用表格的地方写方法、

1.  
   exportData() {
2.  
   let excelName = '某.xlsx';//想要导出的文件名
3.  
   var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
4.  
   // 克隆节点
5.  
   let tables = document.getElementById("out-table").cloneNode(true);
6.  
   // 判断是否为固定列，解决（为固定列时，会重复生成表格）
7.  
               //把想要导出的table的id修改一下
8.  
   if (tables.querySelector('.el-table__fixed') !== null) {
9.  
   tables.removeChild(tables.querySelector('.el-table__fixed'))
10.  
    }
11.  
    let table_book = this.$XLSX.utils.table_to_book(tables, xlsxParam);
12.  
    var table_write = this.$XLSX.write(table_book, {
13.  
    bookType: "xlsx",
14.  
    bookSST: true,
15.  
    type: "array"
16.  
    });
17.  
    try {
18.  
    this.$FileSaver.saveAs(
19.  
    new Blob([table_write], { type: "application/octet-stream" }),
20.  
    excelName
21.  
    );
22.  
    } catch (e) {
23.  
    if (typeof console !== "undefined") console.log(e, table_write);
24.  
    }
25.  
    return table_write;

不过如果表格中插入输入框好像导不出数据（我使用的时候是这样的），我的解决办法是重新写一个表格用v-show的形式隐藏起来 然后导出。