PDF.js 技術揭密：瀏覽器如何渲染 PDF
你有沒有想過，瀏覽器是怎麼直接顯示 PDF 檔案的？答案就是 PDF.js — 一個由 Mozilla 開發的純 JavaScript PDF 渲染引擎。它讓 PDF 的解析和顯示完全在瀏覽器中進行，不需要任何外掛。
PDF.js 的誕生
PDF.js 專案始於 2011 年，由 Mozilla 工程師 Andreas Gal 發起。目標是用純 JavaScript 實現一個完整的 PDF 渲染器，讓 Firefox 不再需要依賴 Adobe Reader 等外部插件來顯示 PDF。這個專案也是 HTML5 Canvas API 能力的一次重要驗證。
PDF.js 的架構
PDF.js 由三個主要層級組成：
1. Core Layer（核心層）
負責解析 PDF 檔案的二進位格式。它讀取 PDF 的物件、交叉參考表和頁面結構，將原始二進位資料轉換為 JavaScript 物件。
2. Display Layer（顯示層）
提供更高層級的 API，讓開發者可以方便地取得頁面資訊、渲染頁面和提取文字。關鍵的 API 包括：
- getDocument() — 載入並解析 PDF 文件
- getPage() — 取得特定頁面的物件
- render() — 將頁面渲染到 Canvas 上
- getTextContent() — 提取頁面的文字內容
3. Viewer Layer（檢視器層）
提供完整的 PDF 檢視器使用者介面，包括頁面導航、縮放、搜尋、書籤等功能。Firefox 內建的 PDF 閱讀器就是使用這一層。
重點摘要：PDF.js 的分層架構讓開發者可以根據需求選擇使用哪一層。如果只需要渲染 PDF 頁面為圖片，只需要 Core 和 Display 層即可。
渲染流程
PDF.js 將 PDF 頁面渲染為圖片的流程如下：
- 載入 PDF — 透過 Fetch API 或 FileReader 載入 PDF 資料
- 解析結構 — Core Layer 解析 PDF 的物件結構和頁面樹
- 取得頁面 — 根據頁碼取得對應的 Page 物件
- 建立 Canvas — 根據頁面尺寸和 DPI 建立 HTML5 Canvas
- 執行繪製指令 — 將 PDF 的 Content Stream 轉換為 Canvas 繪製操作
- 輸出圖片 — 使用 Canvas 的 toDataURL() 或 toBlob() 匯出為圖片
Web Worker 與效能最佳化
PDF.js 使用 Web Worker 來在背景執行緒中進行 PDF 解析，避免阻塞主執行緒。這確保了即使解析大型 PDF 時，頁面的 UI 仍然保持流暢可操作。
| 特性 | 說明 |
|---|---|
| Web Worker | PDF 解析在背景執行緒進行 |
| 漸進式載入 | 支援 Range Request，無需下載整個檔案 |
| 字型子集化 | 只載入文件實際使用的字型字元 |
| Canvas 快取 | 已渲染的頁面會被快取以加速重新顯示 |
PDF.js 在我們工具中的應用
我們的 PDF 轉 JPG 工具正是基於 PDF.js 技術。當你上傳 PDF 檔案時：
- PDF.js 在你的瀏覽器中解析 PDF 結構
- 每一頁被渲染到一個高解析度的 Canvas 上
- Canvas 內容被轉換為 JPG 或 PNG 圖片
- 你可以下載這些圖片
整個過程都在你的瀏覽器中完成，PDF 檔案永遠不會離開你的電腦。
立即體驗 PDF 轉 JPG →結語
PDF.js 展示了現代 Web 技術的強大能力。透過純 JavaScript 實現完整的 PDF 渲染，它讓瀏覽器成為了一個功能完備的 PDF 處理平台。這也是為什麼我們的工具能夠在不需要伺服器端處理的情況下，高品質地將 PDF 轉換為圖片。
參考文獻
- Mozilla. "PDF.js — A general-purpose, web standards-based platform for parsing and rendering PDFs." GitHub, 2024. https://github.com/mozilla/pdf.js
- MDN Web Docs. "Canvas API." Mozilla Developer Network, 2024. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
- Adobe Systems. "PDF Reference, Sixth Edition." Adobe, 2006. https://opensource.adobe.com/dc-acrobat-sdk-docs/pdfstandards/PDF32000_2008.pdf
- MDN Web Docs. "Web Workers API." Mozilla Developer Network, 2024. https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API