前端實現導出功能可以使用一些插件
我使用的是xlsx庫
1.首先我們需要在vue3的項目中安裝xlsx庫。可以使用npm 或者 pnpm來進行安裝

npm install xlsx

或者

pnpm install xlsx

2.在vue組件中引入xlsx庫

import * as XLSX from 'xlsx';

3.定義導出實例方法

const exportExcel = () => {// 準備要導出的數據，這里假設你的數據存儲在dataArray中const dataArray = [{ name: 'John', age: 30, address: 'New York' },{ name: 'Jane', age: 25, address: 'London' },{ name: 'Mike', age: 32, address: 'San Francisco' },];// 將數據轉換為工作表const ws = XLSX.utils.json_to_sheet(dataArray);// 創建一個新的工作簿，并將工作表添加到工作簿中const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 導出為Excel文件// 如果需要設置樣式，則使用XLSXStyle.writeFile(wb, '文件名.xlsx');XLSX.writeFile(wb, '表格數據.xlsx');
}

完整代碼演示

<template><div><button @click="exportExcel">導出Excel</button><!-- 你可以在這里添加其他內容，如表格等 --></div>
</template>
<script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';const exportExcel = () => {// 準備要導出的數據，這里假設你的數據存儲在dataArray中const dataArray = [{ name: 'John', age: 30, address: 'New York' },{ name: 'Jane', age: 25, address: 'London' },{ name: 'Mike', age: 32, address: 'San Francisco' },];//需要注意的是，這樣導出來的數據表頭顯示的是name,age,address，并不是中文，如果想要中文的話需要做一下處理const data = []var titlist = ['名稱','年齡','時間',]data.push(titlist)exportExcel .value.forEach((item) => {var itemArr = [item.name,item.age,item.address,]data.push(itemArr)})// 將數據轉換為工作表const ws = XLSX.utils.json_to_sheet(data);// 創建一個新的工作簿，并將工作表添加到工作簿中const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');// 導出為Excel文件// 如果需要設置樣式，則使用XLSXStyle.writeFile(wb, '文件名.xlsx');XLSX.writeFile(wb, '表格數據.xlsx');
};
</script>

tip:

• 數據格式：確保你的數據格式正確，以便能夠正確的導出到excel文件中。
• 樣式設置：如果你需要為Excel文件中的單元格設置樣式，可以使用xlsx-style庫。在設置樣式時，需要了解xlsx-style庫提供的樣式選項。
• 大數據量處理：如果你的數據非常大，導出過程中時間會很長，需要增加提示來提升用戶體驗。

好了，以上就是全部代碼啦，希望可以幫到你~

看到這如果對你有幫助的話，不如來一波點贊加關注吧~
感謝支持~
加個關注不迷路~~~~