前幾天做了一個需要用于導出 excel的功能，今天我來給大家分享一下

首先需要導入的插件有：

npm install element-plus --save,//elementplus的組件庫（這個可用可不用，我用的是組件的按鈕所以需要使用到他）
npm install xlsx --save//xlsx的插件

現在看看代碼吧?

<script setup> import { reactive, ref } from "vue"; import XLXS from "xlsx"; import FileSaver from "file-saver"; defineProps({msg: String, }); const count = ref(0); const state = reactive({excelTitle: "表格標題1", }); const tableData = reactive([{date: "2016-05-02",name: "安欣",address: "上海市 1518 路",},{date: "2016-05-04",name: "高啟強",address: "上海市 1517 路",},{date: "2016-05-01",name: "高啟盛",address: "上海市 1519 路",},{date: "2016-05-03",name: "唐小虎",address: "上海市 1516 路",}, ]); const exportClick = () => {// 設置當前日期let time = new Date();let year = time.getFullYear();let month = time.getMonth() + 1;let day = time.getDate();let name = year + "" + month + "" + day;// 導出文件名const filename = state.excelTitle;// 通過id，獲取導出的表格數據const wb = XLXS.utils.table_to_book(document.getElementById("table"), {raw: true,});const wbout = XLXS.write(wb, {bookType: "xlsx",bookSST: true,type: "array",});try {FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream",}),name + ".xlsx");} catch (e) {console.log(e);}return wbout; }; </script><template><div class="home"><button type="button" @click="exportClick()">導出pdf</button><div id="table"><el-table :data="tableData" style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table></div></div> </template><style scoped> #pdfDom {color: #42b983; } </style>

?祝各位女程序員大家女神節快樂！（如果有需要還麻煩你們動動你們的小手點個關注。謝謝啦）

總結

以上是生活随笔為你收集整理的vue3导出excel表格方式 ---XLSX文件（最快的导出方法 ）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。