How to use elementUI+Springboot to implement the excel export function
Steps
Dependency package
First, we need to introduce the vue dependency package
I use this
npm install xlsx@^0.16.0 npm install file-saver@^2.0.2
Among themxlsx
The function of the dependency is: to process the data into an excel workbookfile-saver
The function of the dependency is: to save and export the file
element table
Here, the table tag of elemenetUI is actually used to obtain the data. Therefore, we need to add a selector to the table.
In my project, I added an id
:exportExcel
<el-table :data="tableData" id="exportExcel" border ></el-table>
tableData is a custom variable that receives data from the backend
Introduce the package
Then, when you need to write the export The function page is introduced
The details are as follows:
import XLSX from "xlsx"; import FileSaver from "file-saver";
Writing method
In the following code, there is a
var xlxsParam = { raw: true };
The function of this is not to process the data
The main purpose is to prevent data such as dates from being processed, resulting in display errors
// 导出 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; },
Complete example
The complete example is as follows:
<!--页面--> <template> <div> <!--导出按钮--> <el-button type="primary" @click="exportExcelData()">导出</el-button> <!--table数据--> <el-table :data="tableData" id="exportExcel" border > <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>
Final export result
In my project, I need to implement a query and import function for newbie training records, so the final interface style is like this
The actual exported result is:
To maintain privacy, I have removed the name data
The above is the detailed content of How to use elementUI+Springboot to implement the excel export function. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

Atom editor mac version download
The most popular open source editor

Zend Studio 13.0.1
Powerful PHP integrated development environment

SublimeText3 Mac version
God-level code editing software (SublimeText3)

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software