在Vue 3中實現Excel文件的導入和導出功能，你可以使用一些流行的JavaScript庫，如SheetJS（也稱為xlsx）來處理Excel文件。以下是實現這一功能的基本步驟：

1. 安裝SheetJS

首先，你需要安裝xlsx庫。在你的Vue項目中，可以通過npm或yarn來安裝：

npm install xlsx
# 或者
yarn add xlsx

2. 導入和導出Excel文件

導入Excel文件

你可以使用一個文件輸入（<input type="file">）來讓用戶選擇文件，然后讀取文件內容。

<template><div><input type="file" @change="handleFileUpload" /><button @click="exportExcel">導出Excel</button></div>
</template><script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';const data = ref([]); // 存儲Excel數據const handleFileUpload = (event) => {const files = event.target.files;if (files.length === 0) return;const file = files[0];const reader = new FileReader();reader.onload = (e) => {const data = new Uint8Array(e.target.result);const workbook = XLSX.read(data, { type: 'array' });const firstSheetName = workbook.SheetNames[0];const worksheet = workbook.Sheets[firstSheetName];const jsonData = XLSX.utils.sheet_to_json(worksheet);data.value = jsonData; // 更新data為導入的Excel數據};reader.readAsArrayBuffer(file);
};
</script>

導出Excel文件

要導出數據到Excel文件，你可以使用XLSX.utils.book_new()創建一個新的工作簿，然后添加一個工作表并寫入數據。最后，將工作簿轉換為二進制數據，并使用URL.createObjectURL()創建一個下載鏈接。

<script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';const data = ref([ /* 示例數據 */ ]); // 示例數據，實際應用中應從用戶導入的數據中獲取或從其他來源獲取const exportExcel = () => {const ws = XLSX.utils.json_to_sheet(data.value); // 將數據轉換為工作表對象const wb = XLSX.utils.book_new(); // 創建新的工作簿對象XLSX.utils.book_append_sheet(wb, ws, "Sheet1"); // 將工作表添加到工作簿中，命名為"Sheet1"const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' }); // 將工作簿轉換為二進制數據function s2ab(s) { return new Uint8Array(s); } // 輔助函數，將字符串轉換為ArrayBuffer對象saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要額外安裝）
};
</script>

3. 使用FileSaver庫來保存文件（可選）

如果你需要創建一個下載鏈接并觸發下載，可以使用FileSaver庫。首先安裝它：

npm install file-saver
# 或者
yarn add file-saver

然后在你的代碼中引入并使用它：

import { saveAs } from 'file-saver'; // 從file-saver導入saveAs函數

確保在導出函數中使用saveAs來觸發下載：

saveAs(new Blob([s2ab(wbout)],{type:"application/octet-stream"}), "export.xlsx"); // 使用FileSaver.js保存文件（需要額外安裝）

這樣，用戶就可以通過點擊按鈕來導出Excel文件了。通過上述步驟，你可以在Vue 3應用中實現Excel文件的導入和導出功能。