前言

在現代管理系統中，數據的歸檔、分享和線下流轉需求日益增長。如何將前端頁面的圖文內容高質量導出為PDF，成為許多企業和開發者關注的技術點。本文以實際項目為例，系統梳理前端導出PDF的完整實現思路與優化經驗。

---

一、項目背景與需求分析

1.1 背景故事

在某管理系統的實際業務中，客戶經常需要將專利信息、專利內容、專利說明等圖文混排頁面導出為PDF，方便線下歸檔、匯報或發送給合作方。以往只能截圖或手動排版，既不美觀也不高效。客戶提出：“能不能一鍵導出成PDF，圖片和文字都要和頁面一樣，最好還能分頁整齊？”

1.2 需求要點

• 圖片和文字樣式與頁面一致
• 圖片三列并排顯示
• 避免分頁時圖片或內容被切割
• 導出內容鋪滿A4紙張，無多余留白

---

二、需求分析與技術難點

2.1 需求拆解

• 支持圖文混排、表格、圖片等多種內容類型
• 保證導出內容與頁面視覺一致
• 支持自動分頁，且分頁美觀

2.2 技術難點預判

• 樣式丟失：復雜布局、scoped樣式、CSS變量等兼容性問題
• 圖片丟失或不清晰：圖片跨域、未加載完成、分辨率低等
• 分頁問題：內容多時如何自動分頁，如何避免圖片或段落被切割
• 內容寬度適配：如何讓內容鋪滿A4紙張，無多余留白

---

三、技術選型與調研對比

3.1 技術棧說明

• 前端框架：Vue3 + Element Plus
• PDF導出庫：html2pdf.js（集成 html2canvas + jsPDF）
• 樣式：SCSS

3.2 第三方庫調研對比

庫名	優點	缺點
html2pdf.js	上手快，API簡單，支持html2canvas+jsPDF組合，支持圖片、樣式較好	分頁能力有限，復雜布局兼容性一般，分頁需手動優化
jsPDF	純JS生成PDF，API豐富，支持自定義內容	直接渲染HTML能力弱，需手動排版，圖片和樣式支持有限
pdfmake	支持復雜表格、內容流式排版	需用JSON描述內容，不能直接渲染HTML，學習成本高
puppeteer	基于Chrome，渲染效果接近真實頁面，支持復雜CSS	需Node環境，前端不可用，部署復雜，適合后端批量生成
dom-to-image	可將DOM轉為圖片，配合jsPDF導出	只能導出為圖片，文字不可選，PDF體積大

3.3 選型理由

• 需要前端直接導出，不能依賴后端
• 需要保留頁面樣式和圖片
• 需要一定的分頁能力
• 最終選擇了 html2pdf.js，它集成了html2canvas和jsPDF，能較好地兼容圖片和樣式，且API簡單，適合前端一鍵導出。

---

四、實現方案與關鍵步驟

4.1 安裝與引入

pnpm install html2pdf.js
# 或 npm install html2pdf.js

頁面中引入：

import html2pdf