在 Vue 3 中導出 Excel 文件，通常可以使用一些流行的 JavaScript 庫，如?SheetJS (xlsx)?或者?exceljs。這里我將分別介紹如何使用這兩個庫來在 Vue 3 應用中導出 Excel 文件。

方法 1：使用 SheetJS (xlsx)

1. 安裝 SheetJS

   首先，你需要安裝?xlsx?庫。在你的 Vue 項目中運行以下命令：

npm install xlsx

? ? ? 2.在 Vue 組件中使用 xlsx

然后，你可以在 Vue 組件中導入并使用?xlsx?來創建和導出 Excel 文件。

<template><button @click="exportToExcel">導出 Excel</button>
</template><script setup>
import * as XLSX from 'xlsx';const exportToExcel = () => {// 創建工作表數據const data = [["姓名", "年齡", "職業"],["張三", 28, "工程師"],["李四", 35, "設計師"],["王五", 29, "教師"]];// 創建工作表const ws = XLSX.utils.aoa_to_sheet(data);// 創建工作簿并添加工作表const wb = XLSX.utils.book_new();XLSX.utils.book_append_sheet(wb, ws, "Sheet1");// 導出 Excel 文件XLSX.writeFile(wb, "example.xlsx");
};
</script>

方法 2：使用 exceljs

1. 安裝 exceljs

   在你的 Vue 項目中安裝?exceljs：

npm install exceljs

  2.在 Vue 組件中使用 exceljs

<template><button @click="exportToExcel">導出 Excel</button>
</template><script setup>
import ExcelJS from 'exceljs';const exportToExcel = async () => {// 創建工作簿和工作表const workbook = new ExcelJS.Workbook();const worksheet = workbook.addWorksheet('My Sheet');// 添加數據到工作表worksheet.addRow(['姓名', '年齡', '職業']);worksheet.addRow(['張三', 28, '工程師']);worksheet.addRow(['李四', 35, '設計師']);worksheet.addRow(['王五', 29, '教師']);// 設置列寬等（可選）worksheet.columns.forEach(column => { column.width = 20; });// 導出 Excel 文件到瀏覽器或保存到服務器（示例：瀏覽器下載）workbook.xlsx.writeBuffer().then((buffer) => {const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });const url = URL.createObjectURL(blob);const a = document.createElement('a');a.href = url;a.download = 'example.xlsx';a.click();URL.revokeObjectURL(url); // 釋放內存中的 URL 對象資源。});
};
</script>

以上兩種方法都可以在 Vue 3 中實現 Excel 文件的導出。你可以根據自己的需求選擇合適的庫。如果你需要處理更復雜的 Excel 文件（如包含圖片、公式等），exceljs?可能提供更多靈活性和功能。而?xlsx?則因其簡單易用而受到許多開發者的喜愛。