辦公室報帳、學校作業繳交、客戶簽署文件 — 多張照片要整理成一份 PDF 是日常剛需。但「圖片轉 PDF」聽起來簡單,卻有不少坑:HEIC 開不開、A4 還是 Letter、多張排版怎麼省紙、邊距會不會被印表機切掉。這篇用我們的 `image-to-pdf` 工具當範例,把這些細節一次講清楚,讀完直接用純前端方式做完,**檔案不離開瀏覽器**。
為什麼選「純前端」而非雲端服務
多數線上 PDF 工具都是把你的圖片上傳到他們的伺服器轉檔再下載回來。對於報帳收據、合約照片、私人證件這類含敏感資訊的圖,這個流程有明確隱私問題:
- 伺服器是否保留你的檔案?保留多久?
- 是否被當作 training data?
- 公司網管是否能從 SSL 解密看到內容?
純前端方案用 pdf-lib、heic2any 等 client-side library 在你的瀏覽器內完成轉檔,檔案從未產生過任何網路請求離開電腦。代價是首次載入工具的 JS bundle 較大(~500KB),但跑起來後完全離線可用。
HEIC / JPG / PNG / WebP 都能合併嗎?
JPG / PNG / WebP 直接支援,瀏覽器原生 <canvas> 都能 decode。
HEIC(iPhone 預設格式)需要先轉碼:iPhone 拍照後 AirDrop 給 Mac 可以,但傳到 Windows 或上傳到 PDF 工具常常打不開。我們用 heic2any 在前端把 HEIC 解成 JPEG,再丟進 PDF 流程。
注意:HEIC 解碼是 CPU 密集任務,一張 12 MP 照片在中階手機要 1-2 秒。如果一次處理 30 張 HEIC,瀏覽器 UI 會卡住幾十秒,實作上要用 Web Worker 或分批處理避免卡主執行緒。
紙張選擇:A4 vs Letter vs A5 vs Legal
A4(210×297mm):全球大多數國家標準,台灣公司報帳必選。
Letter(8.5×11 吋,~216×279mm):美加標準,比 A4 短一點寬一點,印在 A4 印表機會留下方空白。
A5(148×210mm):A4 的一半,適合手冊、菜單、口袋筆記。
Legal(8.5×14 吋):美國法律文件常用,比 Letter 長很多。
選錯紙張的後果不是「印不出來」,而是內容被縮放:照片變模糊、文字邊緣鋸齒。建議:除非有特殊需求,全球場景一律選 A4。
1-up / 2-up / 4-up 排版怎麼用
「N-up」是每頁塞 N 張縮圖的排版:
- 1-up:每張照片獨佔一頁。畫質最好,但 30 張照片 = 30 頁,印起來貴。
- 2-up:每頁兩張,適合直式照片配對(如護照正反面、收據兩張)。
- 4-up:每頁四張,適合收據報帳(老闆只看金額,不看細節)。30 張收據 → 8 頁,省紙也好歸檔。
進階用法:先用 2-up 排版,再印雙面,實際每張實體紙承載 4 張照片。多數印表機都支援雙面列印 (duplex)。
常見坑:邊距、解析度、字體模糊
邊距太小會被印表機切掉:多數家用印表機留 5-10mm 不可印區。建議邊距 ≥ 15mm。
圖片解析度過低印起來糊:螢幕看 1080p 清楚,印到 A4 全頁需要 ~300 DPI。一張 1920×1080 的截圖印 A4 = 約 160 DPI,字會明顯模糊。截圖 OCR 後再印比直接印更清楚。
JPEG 壓縮品質太低:工具預設常是 80%,看不出差別;但設 60% 以下,文字邊緣會出現「波浪壓縮 artifact」。重要文件用 95% 以上品質設定。
想實際試?用 圖片轉 PDF 工具 上傳一批 iPhone 照片,選 A4 + 4-up + 95% quality,整個流程不離開瀏覽器,完成後直接 download 拖進報帳系統。