elementUI+Springboot实现导出excel功能的全过程
更新时间：2022年09月05日 10:15:27 作者：相与还
这篇文章主要介绍了elementUI+Springboot实现导出excel功能,现在也对这个导出功能进行一个汇总整理写出来，结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
前言
在前面，我们其实已经完成了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
<el-table :data="tableData" id="exportExcel" border style="width: 100%"></el-table>
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;
},
完整实例
完整实例如下:
<!--页面-->
<template>
<div>
<!--导出按钮-->
<el-button type="primary" @click="exportExcelData()">导出</el-button>
<!--table数据-->
<el-table :data="tableData" id="exportExcel" border style="width: 100%">
<el-table-column
label="字段1"
type="字段名称"
align="center"
></el-table-column>
<el-table-column
prop="字段2"
label="字段名称"
align="center"
></el-table-column>
</el-table>
</div>
<template>
<!--逻辑-->
<script>
// 引入依赖
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
name: "newStaffRecord",
data() {
return {
tableData: [], // 接收的后端数据变量
};
},
methods: {
// 导出
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;
},
}
}
</script>
最终导出结果
在我的项目需要做一个新人培训记录查询导入的功能，于是最终界面样式为这样
实际导出后的结果为:
为保持隐私，我把姓名数据去掉了
结语
以上为elementUI实现导出功能的过程
到此这篇关于elementUI+Springboot实现导出excel功能的文章就介绍到这了,更多相关elementUI Springboot导出excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue 使用 sortable 实现 el-table 拖拽排序功能
这篇文章主要介绍了vue 使用 sortable 实现 el-table 拖拽排序功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
这篇文章主要介绍了解决vue内存溢出报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
VUE中setTimeout和setInterval自动销毁案例
这篇文章主要介绍了VUE中setTimeout和setInterval自动销毁案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家详细介绍了vue-Split实现面板分割，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了vue v-model实现自定义样式多选与单选功能所遇到的问题,本文给大家带来了解决思路和实现代码，需要的朋友可以参考下2018-07-07
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-02-02
这篇文章主要介绍的是Vue 组件组织结构及组件注册，为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的，文章学详细内容,需要的朋友可以参考一下2021-10-10
这篇文章主要介绍了 面试问题Vue双向数据绑定原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要为大家详细介绍了vue实现tab栏点击高亮效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
最新评论