在 Vue 項目中，純前端實現導出 PDF 文件是完全可行的。通常可以借助一些 JavaScript 庫來將 HTML 內容或 DOM 元素轉換為 PDF 并下載，無需后端參與。

下面介紹幾種常用的方案和實現方法：

---

推薦方案：使用 html2canvas + jsPDF

安裝依賴（npm）

npm install html2canvas jspdf --save

示例代碼（Vue 3 + Composition API）

<template><div><div id="pdf-content"><h1>這是要導出的內容</h1><p>你可以放任意 HTML 內容，比如表格、圖片等。</p></div><button @click="exportToPDF">導出 PDF</button></div>
</template><script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';const exportToPDF = () => {const input = document.getElementById('pdf-content');html2canvas(input).then(canvas => {const imgData = canvas.toDataURL('image/png');const pdf = new jsPDF('p', 'mm', 'a4'); // A4紙張豎向const pdfWidth = 210; // A4寬度 mmconst pdfHeight = (canvas.height * pdfWidth) / canvas.width;pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);pdf.save('導出內容.pdf');});
};
</script>

---

可選增強功能

支持高清導出（縮放處理）

有時截圖模糊，可適當放大 canvas 縮放比例：

html2canvas(input, { scale: 2 }).then(canvas => { ... })

多頁支持（長頁面自動分頁）

如果你的 HTML 內容超過一頁高度，建議使用插件如 html2pdf.js，它對多頁支持更好：

安裝：

npm install html2pdf.js --save

使用示例：

import html2pdf from 'html2pdf.js';const exportToPDF = () => {const element = document.getElementById('pdf-content');html2pdf().from(element).save('導出內容.pdf');
};

---

注意事項

問題	建議
圖片跨域問題	確保所有圖片資源都允許跨域加載，否則可能無法渲染
中文亂碼	使用 jsPDF 時需手動添加中文字體
表格樣式丟失	盡量使用簡單布局，避免復雜 CSS 樣式
高度自適應	可結合 autoTable 插件繪制表格

---

可選庫對比

庫名	特點	是否推薦
html2canvas + jsPDF	靈活，兼容性好	? 強烈推薦
html2pdf.js	一行代碼搞定，支持分頁	? 推薦
dom-to-pdf	輕量級，適合簡單導出	? 推薦
pdfmake	更適合生成結構化 PDF，不直接支持 HTML 渲染	? 不推薦用于 HTML 導出

---

📎 擴展：導出帶樣式的 PDF

如果需要保留完整的 CSS 樣式，建議：

• 使用 <style> 標簽內聯樣式
• 或者用 iframe 渲染一個完整的 HTML 頁面并導出

---

總結

在 Vue 項目中，前端實現導出 PDF 的最佳實踐是：

使用 html2canvas + jsPDF 或 html2pdf.js，將 DOM 節點轉為圖片再生成 PDF

這種方式不需要任何后端接口，適合導出報表、簡歷、合同等內容。