什麼是HTML 轉 PDF？
將 HTML 標記轉換為可下載的 PDF。支援 CSS 樣式、圖片、表格和自訂頁面尺寸。適合產生發票、報告，或將格式化的網頁內容離線儲存。
紙張可選 A4、A3、Letter 或 Legal,方向縱橫可切換,頁邊距從 0 到 20mm 任意調。還能替檔案設密碼,或在頁尾加上頁碼。內嵌 CSS、Base64 圖片、表格都能正確輸出。底層走的是 html2pdf.js 加 html2canvas,所以帶網頁字體或複雜樣式的頁面,PDF 結果可能與預覽略有差異。
使用方法
- 步驟一 — 在編輯器中貼上或輸入 HTML 內容，即時預覽將顯示 PDF 的最終效果。
- 步驟二 — 設定頁面選項：選擇紙張大小（A4、A3、Letter、Legal）、方向（縱向/橫向）和頁邊距。也可以設定密碼或加上頁碼。
- 步驟三 — 點擊「產生 PDF」建立文件，然後直接下載至裝置。
何時使用
- 將 HTML 發票或收據轉成 PDF 後再寄給客戶。
- 把含圖表與表格的報告封存為可攜 PDF 備份。
- 將網頁內容轉成講義,供線下課程或工作坊列印。
結果
一位自由工作者將包含公司 Logo、分項表格和合計金額的發票 HTML 貼入，設定 A4 縱向並留 20 毫米頁邊距，下載專業 PDF 檔案後寄送給客戶。
常見問題
- 為什麼匯出的 PDF 與即時預覽長得不一樣?
- PDF 是先透過 html2canvas 把畫面繪製成一張圖,再包進 PDF。如果 webfont 尚未載入完成,或有 fixed 元素、CSS filter,結果就可能與預覽不一致。
- 可以引用別人伺服器上的圖片嗎?
- 前提是該伺服器開放 CORS。若沒開,html2canvas 讀不到像素,PDF 中那張圖會是空白。解法是把圖下載後用 Base64 內嵌,或放到同源伺服器上。
- 如何控制分頁?
- 在希望開始新頁的元素上加 page-break-before: always(或 page-break-after)。表格列加 page-break-inside: avoid 就能避免列被切到下一頁。
- PDF 中的文字可以選取複製嗎?
- 通常不能。渲染器透過 canvas 把畫面拍平,文字會變成點陣圖。有些做法會加一層隱形文字以利選取,但本工具產生的是點陣化 PDF——看得清楚,但未必可選可複製。
- 貼上的 HTML 有大小限制嗎?
- 實務上幾百 KB 的標記或 10-15 頁是上限。再長容易記憶體不足,因為整個 DOM 會先繪成一張大 canvas 再拆頁。