瀏覽器擴充功能:將目前網頁儲存為 PDF

瞭解 Webpage to PDF 擴充功能的 Quick、Custom 與 Visual 操作,在側邊欄查看結果、匯出選取節點,並處理 debugger 提示與網頁顯示復原。

有些網頁在自己的瀏覽器裡開得好好的,把網址交給雲端卻只得到登入頁。原因很簡單:雲端瀏覽器沒有你的登入狀態。擴充功能的本機轉換操作的是目前分頁,可以直接從你已經開啟的內容開始。

擴充功能已在 Chrome 線上應用程式商店上架。安裝後,開啟要儲存的網頁,自行完成登入或驗證,再點選擴充功能圖示,選擇 Quick、Custom 或 Visual 匯出 PDF。

雲端與本機轉換怎麼選

想儲存的內容建議入口注意事項
不需登入的公開文章、產品頁網站的雲端轉換不用安裝擴充功能,由遠端瀏覽器獨立開啟網址。
已登入且能查看的網頁擴充功能的本機轉換先自行登入、展開內容;擴充功能不會代為登入或破解驗證。
已開啟的本機開發頁面擴充功能的本機轉換目前瀏覽器必須能存取該 HTTP/HTTPS 網址。
只想儲存一個元件或正文區域擴充功能的 Visual選取對應容器,再匯出選取節點。

轉換只會產生檔案,不會將編輯送回來源網站。能否儲存與分享內容,仍取決於你擁有的存取及使用權限。

從工具列開始

  1. 開啟要儲存的網頁,等待正文出現。需要登入、展開收合內容或完成網站驗證時,先在網頁上處理。
  2. 點選瀏覽器工具列上的 Webpage to PDF 圖示,確認標題與網域對應目前網頁。
  3. 選擇 Quick convert、Custom 或 Visual。從工具列啟動 Quick、Custom 後,進度與結果會顯示在瀏覽器側邊欄。
  4. 等待檔案完成,在 PDF 預覽中檢查開頭、結尾、分頁與圖片,再下載。

主要支援範圍是一般 HTTP/HTTPS 網頁。瀏覽器內部頁面、擴充功能頁面及 file:// 檔案不屬於目前支援的轉換入口。部分受瀏覽器保護的頁面,即使有網址,也可能不允許擴充功能操作。

三種模式會產生什麼結果

模式處理方式適合的結果
Quick分塊擷取網頁,依位置將圖片寫入同一張 PDF 頁面保留外觀的連續長頁;文字通常無法選取,連結無法點擊。
Custom依紙張與版面設定產生瀏覽器 PDF,再處理頁首、浮水印等選項適合閱讀、列印與分享的分頁文件。
Visual先編輯目前網頁,再依 Visual 設定匯出需要先隱藏元素、調整間距,或只保留一個區域。

Quick 與 Custom 不需要先進入編輯模式。Visual 需要在擴充功能的 Account 登入,並具備 Pro 或相應的擴充功能使用權限。網站免費帳戶能使用雲端 Visual,並不等於已取得擴充功能的 Visual 權限。

側邊欄的三種狀態

首頁顯示目前網頁及三種轉換入口。縮圖用來辨認來源網頁,不是最終 PDF,也不會持續更新。底部的 Settings 可調整轉換設定,Account 則顯示登入與權限狀態。

編輯狀態用於 Visual。左側仍是真實網頁,側邊欄提供節點、樣式、DOM 樹及變更記錄。先確認選取框的範圍,再隱藏元素或修改樣式。若選到太小的子元素,可從 DOM 樹改選父容器。

結果狀態顯示轉換進度、錯誤或最終檔案。執行期間不能透過 Back to home 開始另一項任務,必須等任務結束。看到預覽不代表檔案已完成,仍需等待 PDF 產生及文件處理結束。

編輯或轉換期間,請勿重新整理、跳轉或關閉來源分頁。頁面變更會使目前任務使用的內容失效,側邊欄可能回到首頁,需要重新開始。取消匯出時請使用面板內的取消操作,讓擴充功能有機會還原網頁。

Visual 為什麼會改變網頁寬度

開啟 Visual 前,先在設定中選擇 Visual,確認視埠、Screen/Print 及其他頁面選項。編輯器會依這份設定準備目前網頁,因此手機視埠下顯示窄版配置是預期行為。

預設編輯面板位於瀏覽器側邊欄,不占用模擬頁面內部的空間。擴充功能偏好設定也能改成頁面內面板;這只決定 Visual 面板的位置,不會讓不支援側邊欄的瀏覽器自動具備完整的側邊欄功能。

Print 會套用網站自己的列印 CSS。導覽列消失、顏色改變,甚至整個頁面變得樸素,都可能來自網站的列印樣式。想保留一般瀏覽時的外觀,請選 Screen。

編輯階段不會為了預先載入而自動捲動整頁。匯出前,擴充功能才依設定處理延遲載入。必須點擊才出現的內容,仍需先手動展開。

只匯出選取節點

  1. 在 Visual 選取正文、表格或元件,必要時透過 DOM 樹選取外層容器。
  2. 完成樣式調整,確認變更已套用到網頁。
  3. 點選底部匯出按鈕右側的下拉箭頭,選擇 Export selected node。

主按鈕用於整頁匯出。選單中的整頁與節點選項只執行這一次操作,不會記住為下次的預設值;未選取有效節點時,無法使用節點匯出。

節點匯出會將選取區域當成獨立頁面內容,再走 PDF 產生流程,不是直接把選取框截成圖片。已套用的編輯也會包含在匯出結果中。以獨立頁面重新排版後,百分比寬度、定位與響應式版面可能改變,因此仍要檢查預覽,不能將它當成原螢幕座標的直接裁切。

設定在哪裡,需要儲存嗎

工具列彈出面板右上角的設定按鈕可開啟獨立設定頁;側邊欄首頁底部也有 Settings。Quick、Custom、Visual 各自保留設定,修改後自動儲存。確認儲存成功再開始新任務,不需要另外按儲存。

擴充功能偏好設定與 PDF 排版分開,包含以下項目:

設定目前預設值用途
Visual 面板位置瀏覽器側邊欄可改為頁面內面板。
介面語言自動(依瀏覽器語言)在擴充功能選項中從 11 種語言中選擇,變更後自動儲存;未符合支援的語言時使用英語。已安裝擴充功能的名稱與說明仍由瀏覽器語言決定。
節點選取框藍色 #2563eb,2 px顏色與線寬可調整;背景顏色接近選取框時可換色。
網頁右鍵選單開啟提供三種轉換入口,關閉後移除選單項目。
單張截圖最大邊長16000 px可設為 1000–16000 px;長頁面分塊擷取,不必先合成超長圖片。

截圖塊大小不等於 PDF 頁數。Quick 仍盡量保留為連續單頁,必要時整體等比例縮小;Custom 的預覽分塊也不會取代 PDF 的紙張分頁。

目前右鍵選單的 Quick、Custom 仍可開啟網站來顯示本機轉換結果,與工具列進入側邊欄的方式不同。結果顯示在網站上,不代表網頁已交給雲端重新開啟。 請以實際選擇的轉換服務判斷。

為什麼瀏覽器上方會出現 debugger 提示

擴充功能轉換期間,Chrome 顯示正在偵錯的橫幅

擴充功能呼叫瀏覽器偵錯介面,進行視埠、渲染模式、截圖與 PDF 操作時,瀏覽器會顯示這項提示。截圖來自開發版本,擴充功能名稱可能與正式版本不同。

轉換期間請保留橫幅。點選橫幅的 Cancel 會直接中斷連線,可能打斷截圖,讓正常還原流程來不及完成。需要停止時,優先使用轉換面板內的取消按鈕。技術說明見網頁轉 PDF 的實作原理:debugger 橫幅。

出錯後如何還原網頁

先結束任務,再重新開啟工具列彈出面板。擴充功能會檢查可能殘留的轉換視埠或渲染模式;若出現 Restore page display,點選它還原顯示。這項檢查針對可能在重新整理後仍保留的瀏覽器顯示設定,不是所有網頁互動的通用復原按鈕。

網頁表單、收合狀態與其他指令碼操作不一定能完整復原。需要重新整理時,先儲存尚未送出的內容。若仍無法捲動或顯示異常,保留失敗階段與錯誤文字,依疑難排解指南回報,別反覆關閉 debugger 橫幅嘗試修復。

延伸閱讀