HTML 轉 PDF：樣式一起帶過去
由 FreePDF 團隊撰寫 ·
把一個 .html 檔寄給別人其實不太可靠：在你這台電腦上好好的，到了對方那邊樣式沒了，或者換個瀏覽器排版就變了，再不然直接被信箱當附件擋下來。轉成 PDF 就把這一頁定住了——一個檔案，在哪打開都一樣，印出來也就是看到的樣子。
什麼帶得過去，什麼帶不過去
上傳 .html 或 .htm 檔，它會像瀏覽器準備列印時那樣被算繪成 PDF。轉之前有三件事值得先知道：
- 檔案裡的 CSS 會生效。寫在
<style>區塊或style=屬性裡的東西都會帶過去：字型、顏色、框線、表格、背景。 - JavaScript 不會執行。頁面就按檔案裡現在的樣子算繪。如果某個圖表或表格是載入時由腳本畫出來的，PDF 裡拿到的就是那個空殼容器。
- 相對路徑找不到東西。上傳上來的檔案沒有自己的網址，也就沒有「相對於哪裡」可言，所以
<img src="images/logo.png">或<link href="style.css">指不到任何地方。寫成完整的https://網址則會正常抓取。
最後一條的解法是做成單一檔案的頁面：把 CSS 貼進 <style> 區塊，圖片要嘛用完整網址，要嘛直接內嵌成 data: URI。多數會產生 HTML 報表的工具，還有瀏覽器的「網頁另存新檔 → 單一檔案」，本來就是這麼做的。
紙張和邊界可以用 CSS 控制
既然是照列印輸出來算繪的，列印相關的 CSS 就都算數。如果 HTML 是你自己產生的，幾條規則就夠用了：
@page { size: A4; margin: 20mm; }定紙張尺寸和邊界。用美式信紙的把A4換成Letter。- 給標題加
break-before: page，每一章就從新的一頁開始。 - 給表格或卡片加
break-inside: avoid，它就不會被切成跨兩頁。 @media print裡的規則同樣生效，所以導覽列、橫幅這些你本來就不想印出來的東西不會進 PDF。
什麼時候該用瀏覽器內建的列印
這話得講明白，因為它經常才是對的答案：如果你要存的是一個活的網頁，那就直接打開它、列印成 PDF。瀏覽器手上已經有載好的頁面——圖片在、腳本跑過了、你也登入著，這些東西是一個上傳的檔案裡根本不包含的。
在這裡轉檔，適合的是你手上已經有一個自成一體的 .html：信件裡的帳單、腳本輸出的報表、某個工具的匯出檔、存下來的收據——而且你想要一份乾淨的 PDF，邊上不帶瀏覽器自己蓋的頁首頁尾和頁碼。它還有一個好處是可重現：同一個檔案在任何機器上轉出來都是同一份 PDF，而列印對話框裡那一堆各人各樣的設定做不到這件事。
還有一種情況：文件是你自己要寫的，不是拿來轉的。那用 Markdown 能整個繞開這些麻煩——沒有 CSS 要操心，也沒有資源檔要追。
常見問題
可以直接給它一個網址嗎？
不行，它轉的是你上傳的檔案。先把頁面存下來（Ctrl+S / Cmd+S，瀏覽器如果有「單一檔案」選項就選它），再上傳。要是頁面得登入之後才看得到，自己存檔本來也是唯一能把內容取出來的辦法。
轉出來的 PDF 沒有樣式，怎麼回事？
幾乎都是樣式表放在另一個檔案裡。HTML 引的是 style.css，你上傳的只有 HTML，那就沒東西可載入。用文字編輯器打開檔案，把 CSS 移進 <head> 裡的 <style> 區塊，再轉一次就好了。