HTML 轉 PDF

如何把 HTML 轉成 PDF

步驟 1：把 HTML 標記貼進工具，或用匯入按鈕讀入 .html 檔案。您的標記會在獨立的框架中排版，與本站樣式完全隔離，對方的 CSS 不會污染您的版面，您的標記也不會被本站樣式干擾。步驟 2：在預覽中確認 Flexbox、Grid、漸層、圓角、陰影與行內 SVG 的呈現，所見即所得。步驟 3：下載 PDF。全程免費、安全、免安裝、免註冊。

原理是為您的 HTML 拍照：瀏覽器先渲染，再由繪製程式拍下結果，成品 PDF 的每一頁都是當時畫面的 PNG 影像。因此成品文字無法選取，也請先有心理準備：需要可搜尋文字層時，請改用瀏覽器的列印成 PDF，或事後經過 OCR 處理，動手前先選對工具。

換來的是分毫不差的版面。版面引擎排完才拍照，欄位、漸層與陰影都落在瀏覽器擺放的位置，不會像某些轉換器那樣跑版。渲染以兩倍尺寸進行，約 144 dpi，螢幕與辦公室列印都足夠銳利；若要送商業印刷，這個解析度會開始不夠用，請另擇專業流程。

預覽時請特別留意圖片與字型：相對路徑的圖片會缺席，非系統字型若無內嵌也會被替代，版面乍看正常、細節卻已走樣，簽核時才發現就晚了。發現缺圖缺字時，先把圖片改為絕對路徑或 data URI，把字型以內嵌方式提供，再重新轉換，成品才會完整。預覽免費，看多少次都不收費，看到好為止再下載。

什麼時候適合轉成圖片式 PDF

合約這類需要搜尋的檔案不適合光柵化；當頁面的長相本身就是重點時，它就是正確答案。以下四種情境最典型。

貼上標記不等於開啟檔案

匯入 .html 按鈕只讀取那一個檔案的文字。旁邊的樣式表、images 目錄的標誌、fonts 目錄的字型都不會跟著進來，因為瀏覽器不會把磁碟其餘部分交給網頁，這是瀏覽器的安全邊界，不是工具的限制。

相對路徑是安靜的失敗原因。標記在這裡渲染，而非在它原本存放的資料夾，因此 src="logo.png" 會向本站請求而非向該資料夾，結果是取不到圖的空白。只有絕對 https 路徑且伺服器回傳 CORS 標頭時才載入；缺少時會被跳過，且沒有警告，缺圖時請先檢查這兩處。

指令碼一律不執行，單頁應用程式存檔轉出來近乎空白——您存下的是外殼，而非渲染結果。請從元素檢查器複製 live DOM，那才是瀏覽器真正畫出來的東西。可靠的是自給自足的內容：檔案內的 style 區塊、行內樣式、以 data URI 寫入的圖片。

與其他做法的比較

把 HTML 送進 PDF 有三種方式，各有輸贏，輸掉的欄位值得細讀，選工具前先看清楚代價。

保留了什麼，以及頁面在哪裡斷開

色彩、漸層、邊框、圓角、陰影、透明度、CSS 變形、文字陰影、表格、清單與行內 SVG 都會保留。渲染器逐格重繪而非向系統要截圖，因此少數新特效沒有對應做法，會被無聲丟棄：filter 與 blur、mix-blend-mode、backdrop-filter、clip-path 與遮罩，使用前請先確認。

標記在約 515 像素寬的視口中排版，即 A4 內容寬度換算的 CSS 像素，響應式頁面會以窄版斷點渲染，min-width 768px 以上的媒體查詢不會觸發。若版面在 768 像素以下長得不對，這裡也不會對，請先調整您的響應式設計。

成品是一張長圖，按固定間距切成頁高，表格列或標題可能被攔腰切斷，CSS 分頁屬性幫不上忙。解法是手動避開：用邊距或空白墊片把尷尬的元素推過分界線，每頁約容納 762 點內容，排版時先把這個數字放在心上。

動手排版前，建議先估算內容高度：每頁約容納 762 點，把大表格、大圖與標題群先切成頁高以下的區塊，再用邊距與墊片微調位置，讓每個區塊安穩落在一頁之內。與其轉完才發現斷裂重來，不如事前按頁高分段，成品一次到位，省時又省心。

HTML 不會離開這個分頁

伺服器端轉換一定得把標記拿到它的機器上：不是貼進表單上傳，就是給它網址讓爬蟲抓取，後者對登入後的頁面還得交出帳號密碼。滿屏客戶名單或未發佈的測試站，都不值得這樣交換。

這裡的渲染全在您已開啟的分頁中發生：繪製標記、組裝頁面、下載成品一氣呵成，網路上沒有任何一段承載您的 HTML。關閉分頁即清除，沒有帳號紀錄，也沒有伺服器備份。

全程免費、安全、免安裝、免註冊：免上傳是預設，不是選項；處理在您的裝置上完成，沒有任何中繼站經手您的標記，做完即走。

手機上同樣可用：在行動瀏覽器貼上標記，渲染寬度固定為 A4 內容寬度，與螢幕大小無關，成品直接下載到裝置，與桌機完全一致。通勤時整理校稿、現場產出快照，都不必等到回辦公室，隨手就能完成。