以下是基于 Vue 3 Composition API 的完整實現，包括 PDF 和 Excel 導出。

一、PDF 導出 (Vue 3)

安裝依賴

在項目中安裝相關庫：

npm install html2canvas jspdf

Vue 3 代碼實現

<template><div><div ref="pdfContent" class="pdf-content"><h1>導出為 PDF 示例</h1><table border="1"><tr><th>序號</th><th>名稱</th><th>數量</th></tr><tr v-for="(item, index) in tableData" :key="index"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.count }}</td></tr></table></div><button @click="downloadPDF">導出 PDF</button></div>
</template><script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';const pdfContent = ref(null);const tableData = ref([{ name: '數據1', count: 10 },{ name: '數據2', count: 20 },{ name: '數據3', count: 30 },
]);const downloadPDF = async () => {const element = pdfContent.value;// 使用 html2canvas 將 DOM 元素渲染成 Canvasconst canvas = await html2canvas(element, {scale: 2, // 提高清晰度useCORS: true,});const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF('p', 'mm', 'a4'); // 定義 PDF 尺寸和方向const imgWidth = 210; // A4 紙寬度 (mm)const imgHeight = (canvas.height * imgWidth) / canvas.width;pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);pdf.save('export.pdf');
};
</script><style scoped>
.pdf-content {padding: 20px;background-color: #fff;
}
</style>

說明

1. ref() 用于定義模板中的 DOM 引用。
2. html2canvas 將 DOM 渲染為 Canvas，支持跨域圖片加載。
3. jspdf 創建 PDF 文件。
4. pdf.addImage() 添加圖像，pdf.save() 觸發保存。

---

二、Excel 導出 (Vue 3)

安裝依賴

安裝相關 Excel 生成和下載工具：

npm install xlsx file-saver

Vue 3 代碼實現

<template><div><table border="1"><tr><th>序號</th><th>名稱</th><th>數量</th></tr><tr v-for="(item, index) in tableData" :key="index"><td>{{ index + 1 }}</td><td>{{ item.name }}</td><td>{{ item.count }}</td></tr></table><button @click="exportExcel">導出 Excel</button></div>
</template><script setup>
import { ref } from 'vue';
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';const tableData = ref([{ name: '數據1', count: 10 },{ name: '數據2', count: 20 },{ name: '數據3', count: 30 },
]);const exportExcel = () => {const worksheet = XLSX.utils.json_to_sheet(tableData.value);const workbook = XLSX.utils.book_new();XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');// 生成 Excel 文件的二進制數據const excelBuffer = XLSX.write(workbook, {bookType: 'xlsx',type: 'array',});// 創建 Blob 并觸發下載const blob = new Blob([excelBuffer], {type: 'application/octet-stream',});saveAs(blob, 'export.xlsx');
};
</script>

說明

1. ref() 定義響應式數據。
2. XLSX.utils.json_to_sheet() 將 JSON 轉換為 Excel 工作表。
3. XLSX.utils.book_new() 創建新的 Excel 文件。
4. file-saver 生成文件并觸發瀏覽器下載。

---

三、分頁生成 PDF（處理多頁情況）

在 PDF 內容過長超出單頁時，可以通過分頁處理：

const imgHeight = (canvas.height * imgWidth) / canvas.width;
let position = 0;pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);while (position + imgHeight < canvas.height) {position -= 297; // A4 高度pdf.addPage();pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight);
}

---

四、Excel 單元格格式優化

可以通過設置 cellStyles 控制單元格格式和寬度：

const worksheet = XLSX.utils.json_to_sheet(tableData.value);// 設置列寬
worksheet['!cols'] = [{ wch: 20 }, { wch: 30 }];// 設置字體、對齊方式
worksheet['A1'].s = {font: { bold: true, color: { rgb: 'FF0000' } },alignment: { horizontal: 'center' },
};

這部分代碼涉及對 Excel 文件中 單元格的格式和寬度 進行設置，目的是在生成的 Excel 文件中對表格顯示效果進行優化，提升可讀性和專業性，簡單來說，提升導出后文件的美觀性。雖然即使不設置這些格式，基本的數據導出功能也可以正常工作，但設置格式后可以顯著提升導出的 Excel 文件在外觀和布局上的效果。?

默認格式往往存在以下問題：

• 列寬可能過窄，導致內容被截斷。
• 字體默認是常規字體，無法突出重點信息。
• 內容默認左對齊，缺乏視覺層次感。

---

五、常見問題及解決

1. HTML2Canvas 截圖為空白或內容不完整

• 確認 DOM 元素已在渲染后再進行截圖。
• 如果存在跨域圖片，需配置 useCORS: true。

---

2. Excel 文件下載后打開報錯

• 確認生成的二進制數據完整。
• 確認 Blob 格式為 application/octet-stream。

---

六、最佳實踐

• PDF 適用于導出完整頁面（包括圖表和布局）。
• Excel 適用于導出結構化數據（如表格、JSON）。
• 分頁導出適用于數據量較大的情況。