您现在的位置是：网站首页> 编程资料编程资料

elementUI+Springboot实现导出excel功能的全过程_vue.js_

2023-05-24 399人已围观

简介 elementUI+Springboot实现导出excel功能的全过程_vue.js_

前言

在前面，我们其实已经完成了elementUI+springboot的导入功能
springboot实现上传并解析Excel过程解析
那么，现在也对这个导出功能进行一个汇总整理写出来
其实，导出功能相对导入功能还是比较简单，本次不需要考虑到后端

步骤

依赖包

首先，我们需要引入vue的依赖包
我用的是这个

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

其中xlsx依赖的作用为：将数据进行处理为excel工作簿
file-saver依赖的作用为：将文件进行一个保存导出来

element表格table

这里，实际上是用的elemenetUI的表格table标签，获取到数据，因此，我们需要对表格添加一个选择器
在我的项目中，我是添加了一个id：exportExcel

tableData为自定义的接收后端传过来的数据的变量

引入包

然后，在你需要编写导出功能的页面，进行引入
具体如下:

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

编写方法

以下代码中，有一个

var xlxsParam = { raw: true };

这个的作用是不对数据进行处理
主要目的是为了防止把日期这种数据处理掉，导致显示出错

 // 导出 exportExcelData() { var xlxsParam = { raw: true }; // 从表中生成工作簿 var wb = XLSX.utils.table_to_book( document.querySelector("#exportExcel"), xlxsParam ); // 获取二进制字符串作为输出 var wbOut = XLSX.write(wb, { bookType: "xlsx", bookSST: true, type: "array", }); try { FileSaver.saveAs( // Blob 对象表示一个不可变、原始数据的类文件对象 // Blob 表示的不一定是js的原生格式数据 // File 接口基于Blob, // 返回一个新创建的Blob对象,其内容由参数中给定的数组串联 new Blob([wbOut], { type: "application/octet-stream" }), // 导出文件名称 "文件名称.xlsx" ); } catch (e) { // 捕捉报错 if (typeof console != "undefined") { console.log(e, wbOut); } } // 将结果返回出来，导出文件 return wbOut; },