無需上傳, 100% 本機處理, 無需帳戶

HTML 轉 PDF

貼上 HTML、選一個頁面尺寸,然後下載一份 PDF,一切都在你的瀏覽器裡算繪。

HTML 轉 PDF 的運作方式

HTML 轉 PDF 工具接受你貼入編輯器的 HTML 標記,使用 DOMPurify 清理以去除腳本和不安全屬性,透過 html2canvas 在離屏畫布上渲染,再用 jsPDF 將結果編碼為 PDF。整個管線在你的瀏覽器分頁中執行;沒有 HTML 程式碼或渲染輸出傳送至任何伺服器。這使它適合轉換包含個人資料、你不願貼入線上服務的 HTML 片段。

依賴此工具前,請先了解輸出格式。PDF 頁面是點陣圖圖片,而非向量文字。輸出中的文字無法選取、無法搜尋,也無法自動換行。通過 URL 引用的外部資源受瀏覽器 CORS 政策限制,無法載入。內聯樣式和嵌入的 CSS 可以運作,但含有自訂網頁字型或進階 CSS 格線的複雜版面可能無法準確渲染。對於需要忠實呈現完整網頁的轉換,在伺服器端執行的無頭瀏覽器才是更合適的工具。

HTML 轉 PDF 的分步使用說明

  1. 將 HTML 標記貼入編輯區域。
  2. 可選擇調整頁面大小(A4 或 Letter)和方向。
  3. 點擊「轉換」;DOMPurify 清理 HTML,html2canvas 渲染。
  4. 等待 jsPDF 將畫布輸出編碼為 PDF 頁面。
  5. 下載 PDF。

常見使用情境

  • 你在瀏覽器中從本機範本生成了 HTML 發票,想要一份 PDF 副本,但不願將其傳送至轉換服務。
  • 從 API 資料建立的簡單 HTML 報告需要儲存為 PDF 以便歸檔;貼入 HTML 在本機轉換。
  • 你撰寫了一份帶樣式的 HTML 電子郵件範本,想預覽列印為 PDF 的效果。
  • 開發人員在測試時需要從 HTML 片段快速生成 PDF,無需架設伺服器端無頭瀏覽器。

常見問題

為什麼輸出 PDF 中的文字無法選取?

轉換管線使用 html2canvas 將 HTML 渲染為畫布點陣圖,再用 jsPDF 將該點陣圖編碼為 PDF 頁面中的圖片資料。輸出是點陣化圖片,不是文字層。若你需要帶有可選取文字的 PDF,你需要伺服器端無頭瀏覽器(如 Puppeteer),而此工具刻意避免這一點以保持本機處理。

為什麼我 HTML 中的圖片沒有出現在 PDF 中?

從外部 URL 載入的圖片受瀏覽器 CORS 政策約束。若圖片伺服器未傳送允許的 CORS 標頭,html2canvas 無法讀取像素資料,圖片位置就會渲染為空白。直接嵌入 HTML 的 Base64 編碼內聯圖片,或來自同一來源的圖片,則不受此限制影響。

我貼入的 HTML 是否傳送至伺服器?

不會。HTML 全程保留在瀏覽器記憶體中。DOMPurify 在用戶端清理,html2canvas 在用戶端渲染,jsPDF 在用戶端編碼 PDF。沒有任何內容離開瀏覽器分頁。

DOMPurify 清理移除了哪些內容?

DOMPurify 移除 script 標籤、onclick 和 onload 等事件處理屬性、javascript: URL 及其他可能執行程式碼的結構。它保留結構和樣式標記,因此渲染輸出看起來相同,但可安全插入文件環境。

可以輸入完整網頁 URL 而非貼入 HTML 嗎?

不能。工具只接受你直接貼入的 HTML 標記。載入 URL 需要擷取頁面,這對大多數網站會遇到 CORS 限制,且涉及將操作帶出本機處理模式的網路請求。