まず、vue依存関係パッケージを導入する必要があります
私はこれを使用します
npm install xlsx@^0.16.0 npm install file-saver@^2.0.2
そのうちのxlsx
依存関係の機能は次のとおりです: データを Excel ワークブックに処理しますファイルセーバー
依存関係の機能は次のとおりです: ファイルを保存しエクスポートします
ここでは実際にelemenetUIのtableタグを利用してデータを取得しているので、テーブルにセレクターを追加する必要があります。
私のプロジェクトでは、id
:#を追加しました。 ##exportExcel
<el-table :data="tableData" id="exportExcel" border ></el-table>
詳細は以下のとおりです。
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 中国語 Web サイトの他の関連記事を参照してください。