How to use elementUI+Springboot to implement the excel export function
May 18, 2023 pm 07:19 PMSteps
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 Article

Hot tools Tags

Hot Article

Hot Article Tags

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

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

Hot Topics

How to filter more than 3 keywords at the same time in excel

What should I do if the frame line disappears when printing in Excel?

How to change excel table compatibility mode to normal mode
