您可以在線找到完美的文章，並使用瀏覽器列印功能將其儲存為 PDF。產生的 PDF 看起來與您正在閱讀的網頁完全不同。影像遺失。文字重疊。螢幕上乾淨易讀的版面在 PDF 頁面上卻是一團糟。瀏覽器Web到PDF的轉換很方便，但不精確，產生的輸出近似而不是複製原始網頁。
瀏覽器列印到 PDF 功能使用網頁的列印 CSS 樣式表，而不是螢幕 CSS。 Web 開發人員經常會建立專門用於列印的簡化佈局，刪除導覽、側邊欄和廣告。此列印佈局可能看起來與您在螢幕上看到的內容有很大不同。這種差異是有意為之的，旨在產生更清晰的列印輸出，但它可能會令人驚訝。
為什麼瀏覽器列印輸出與螢幕顯示不同
網頁使用兩種獨立的 CSS 樣式表：一種用於螢幕顯示，一種用於列印。螢幕樣式表控制您在瀏覽器中看到的內容。列印樣式表控制列印或另存為 PDF 時顯示的內容。這兩個樣式表可以指定完全不同的版面、字體、顏色甚至內容。
PDF 格式轉換也會移除互動元素。需要點擊或懸停才能顯示內容的下拉式選單、選項卡式內容、輪播和手風琴部分會產生不完整的 PDF 輸出。 PDF 僅捕獲這些元素的當前可見狀態，這可能是它們的折疊或隱藏狀態。
列印樣式表解釋了大部分的驚喜。
列印樣式表是大多數佈局意外背後的罪魁禍首。
初始頁面載入後由 JavaScript 載入的動態內容可能不會出現在 PDF 中。無限滾動頁面、延遲加載的圖像以及需要用戶互動才能加載的內容尤其容易受到攻擊。瀏覽器會列印 DOM 中目前載入的內容，這可能只是整個頁面內容的一小部分。
常見列印問題及其解決方法
PDF 輸出中遺失影像通常是由於列印樣式表隱藏影像以節省墨水，或是由於啟動列印時尚未載入的延遲載入影像造成的。捲動整個頁面以在列印前觸發延遲載入。在瀏覽器開發人員工具中停用列印樣式表以強制使用螢幕佈局進行列印。
WukongPDF 可以處理產生的PDF 查看 輸出以調整頁面尺寸並刪除不需要的元素，但它無法恢復瀏覽器在列印擷取期間忽略的內容。
使用閱讀器模式實現更清晰的 PDF 輸出
大多數瀏覽器都包含一個閱讀器模式，可以提取主要內容並以乾淨的單列格式顯示。列印為 PDF 之前啟動閱讀器模式。閱讀器模式輸出比完整網頁更簡單，但更可靠，文字流程一致，不會遺失內容。
專用網頁轉 PDF 工具與瀏覽器列印
專用的網頁擷取工具可產生比瀏覽器列印功能更可靠的 PDF 輸出。這些工具完全渲染頁面，等待所有內容加載，並捕獲螢幕佈局而不是列印佈局。輸出更接近您在螢幕上看到的內容。
必須準確擷取為 PDF 的網頁，測試瀏覽器列印功能和專用擷取工具。比較輸出。為一個網頁產生最佳結果的工具可能不適用於另一個網頁。網頁設計的可變性意味著沒有一種方法可以完美地適用於所有頁面。
處理多頁網頁內容
PDF 輸出中跨多個列印頁面的長文章通常會出現尷尬的分頁符，即在句子中間切入圖像或分割段落。瀏覽器分頁演算法不理解內容邊界。它根據紙張尺寸在固定位置分頁。
使用瀏覽器列印預覽來確定將出現分頁符號的位置。調整列印比例、邊距或紙張尺寸，將分頁符號移至更自然的位置。稍微縮小比例（從 100% 到 95%）可以充分移動分頁符，以避免最嚴重的內容分割。
對於分成多個 PDF 頁面的文章，請考慮在捕獲後使用 PDF 編輯器來組合碎片內容。裁剪單一頁面圖像並將它們重新組合成一個連續的文檔，該文檔比瀏覽器強加的分頁符號更自然。
保留互動式和動態內容
嵌入影片、音訊或互動式圖表的網頁在 PDF 輸出中會失去這些元素。 PDF 會擷取目前狀態的靜態影像。對於互動元素必不可少的內容，請在 PDF 中包含原始網頁的 URL，以便讀者可以存取完整的互動版本。
捕獲的 PDF 中的連結可能無法單擊。瀏覽器列印功能有時會將文字轉換為不保留超連結的向量輪廓或光柵圖像。透過點擊已知連結來驗證連結功能來測試 PDF 輸出。如果連結遺失，請使用 PDF 編輯器手動將其加回。
社群媒體嵌入、評論部分和動態載入的相關內容很少能在列印到 PDF 的過程中倖存下來。如果這些元素很重要，請將它們單獨捕獲為螢幕截圖，並在捕獲主要內容後將它們插入 PDF 中。
使用響應式佈局設計的網頁可能會為列印引擎提供與螢幕不同的佈局。在手機上看起來乾淨的行動響應式設計可能會列印為帶有過多空白的窄列。在不同的瀏覽器視窗寬度下測試列印輸出可以決定產生最佳 PDF 輸出的視窗大小。
使用 CSS Grid 或 Flexbox 進行佈局的網頁在列印時可能會出現不可預測的回流，因為列印樣式表通常會用簡化的線性佈局取代複雜的螢幕佈局。螢幕上並排顯示的內容在 PDF 中垂直堆疊。
從 Google Fonts 或 Adobe Fonts 等 Web 服務載入的自訂字體可能無法用於瀏覽器列印引擎。列印輸出替換系統字體，變更文字外觀、行長度和分頁符號。
為了節省墨水，預設通常不會列印透過 CSS 應用的背景圖片和漸層。當背景被移除而淺色文字保留時，依靠深色背景和淺色文字來提高可讀性的部分可能會變得不可見。
具有固定標題或黏性導覽列的網頁可以出現在每個頁面上的 PDF 內容的中間。這些元素是相對於視口而不是頁面內容定位的，並且它們的固定定位在 PDF 轉換中丟失。
列印時瀏覽器的縮放等級會影響 PDF 輸出。以 100% 縮放列印的頁面與以 75% 縮放列印的同一頁面產生不同的結果。縮放等級會變更文字大小和頁數。
從行動瀏覽器列印網頁會產生與從桌面瀏覽器列印不同的結果，因為行動瀏覽器通常會向列印引擎提供頁面的簡化版本。
在登入或付費專區後面的網頁，列印的 PDF 可能包含僅在身份驗證後才可見的內容。 PDF 成為經過驗證的內容的記錄，應採取適當的安全措施。
修改網頁外觀的瀏覽器擴充功能（例如廣告攔截器、暗模式擴充和自訂樣式表）會影響列印輸出。列印的 PDF 反映了擴充功能呈現的修改後的頁面。
將網頁另存為 PDF 本質上是將動態媒體快照轉換為靜態格式。轉換會及時捕獲頁面，凍結幾分鐘後可能更改的內容。
出於存檔目的，從網頁保存的 PDF 應在文件元資料或首頁中包含 URL 和存取日期，以便將來的讀者可以找到原始來源。
具有 React、Angular 或 Vue 等重型 JavaScript 框架的網頁可能在 PDF 輸出中幾乎不渲染任何內容，因為列印引擎在 JavaScript 完成建立 DOM 之前捕獲頁面。頁面載入後等待幾秒鐘再列印，以便框架有時間完成渲染。
以列印為目標的 CSS 媒體查詢可以隱藏或顯示特定元素。精心設計的列印樣式表包括主要內容，不包括導航、廣告和評論。設計不當或缺少的列印樣式表會退回到螢幕佈局，這可能無法很好地轉換為 PDF 的固定頁面尺寸。
列印需要身份驗證的頁面時，瀏覽器快取會影響 PDF 輸出。如果瀏覽器已快取憑證，則列印輸出將包含經過驗證的內容。如果工作階段已過期，列印輸出可能會顯示登入頁面而不是預期內容。列印前透過捲動整個頁面來驗證頁面內容。
列印包含來自其他網域的嵌入 iframe 的網頁可能會在 iframe 內容應顯示的位置產生空白區域。跨域限制阻止列印引擎存取來自不同網域的 iframe 內容。 PDF 輸出在螢幕上顯示嵌入內容的空矩形。
對於重要的網頁捕獲，請在列印為 PDF 之前使用瀏覽器的「另存為」功能保存完整的網頁、HTML 和資源。儲存的副本可作為頁面外觀的參考，您可以將 PDF 輸出與已儲存的副本進行比較，以確定列印轉換期間遺失的內容。