vue导出excel

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

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

npm i file-saver
npm i xlsx

第二步引入在main.js里

import FileSaver from 'file-saver'

import * as XLSX from 'xlsx'

第三步挂载上

app.config.globalProperties.$FileSaver = FileSaver //设置全局

app.config.globalProperties.$XLSX = XLSX //设置全局

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

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

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