素材巴巴 > 程序开发 >

element-ui table导出excel

程序开发 2023-09-15 16:37:53

1.首先安装导出excel所需要的两个依赖包
这里下载的话最好是指定一下版本,不然会出现版本问题

npm install  xlsx@^0.16.0 --save
 npm install  file-saver@^2.0.2 --save
 

2.下载完成后在指定的页面引入使用

import FileSaver from "file-saver";
 import XLSX from "xlsx";
 

3.然后要给需要导出的table定义一个id在这里插入图片描述
4.通过点击事件调用导出excel的函数
在这里插入图片描述
5.导出函数
注意:导出的时候下面一段代码是不对格式进行处理导出,以防止导出的时候日期什么的会出现乱码,可以根据情况来决定时候要加

var xlsxParam = { raw: true };
 
 //定义导出Excel表格事件exportExcel() {var xlsxParam = { raw: true };/* 从表生成工作簿对象 */var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"),xlsxParam);/* 获取二进制字符串作为输出 */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;},
 

下面是完整代码


 

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。