Element-ui组件库Table表格导出Excel文件

Element-ui组件库Table表格导出Excel文件

1.npm导入包

npm install --save xlsx file-saver

2.给el-table标签添加id

<el-table :data="tableData" border id="out-table" >

3.引用包

// 引入导出Excel表格依赖
    import FileSaver from "file-saver";
    import XLSX from "xlsx";

4.添加导出按钮

<button @click="exportExcel">点击导出</button>

5.导出方法

//定义导出Excel表格事件
exportExcel() {
        /* 从表生成工作簿对象 */
        let wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: 'xlsx',
            bookSST: true,
            type: 'array'
        })
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: 'application/octet-stream' }),
            //设置导出文件名称
            'sheetjs.xlsx'
            )
        } catch (e) {
            if (typeof console !== 'undefined') console.log(e, wbout)
        }
        return wbout
        }

参考资料：https://blog.csdn.net/gs981600308/article/details/88997292

标签：wbout,xlsx,表格,导出,Excel,Element,ui,Blob
来源： https://www.cnblogs.com/s313139232/p/12557556.html