먼저 vue의 종속성 패키지를 소개해야 합니다
저는 이것을 사용합니다
npm install xlsx@^0.16.0 npm install file-saver@^2.0.2
xlsx
종속성의 역할은 데이터를 Excel 통합 문서로 처리하는 것입니다xlsx
依赖的作用为:将数据进行处理为excel工作簿file-saver
依赖的作用为:将文件进行一个保存导出来
这里,实际上是用的elemenetUI的表格table标签,获取到数据,因此,我们需要对表格添加一个选择器
在我的项目中,我是添加了一个id
:exportExcel
< code>file-saver 종속성의 기능은 file
element table
id
를 추가했습니다: exportExcel
<el-table :data="tableData" id="exportExcel" border ></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 > <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+Springboot를 사용하여 Excel 기능을 내보내는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!