elementui中有导出组件吗_Element-ui组件库Table表格导出Excel文件

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

1.npm导入包

npm install --save xlsx file-saver

2.给el-table标签添加id

3.引用包

// 引入导出Excel表格依赖

import FileSaver from "file-saver";

import XLSX from "xlsx";

4.添加导出按钮

点击导出

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