視覺化編輯器

本文的遠端瀏覽器、登入與額度說明適用於網站的雲端轉換。已安裝開發版擴充功能、想儲存目前網頁時，請看瀏覽器擴充功能指南。

視覺化編輯器是用來在建立 PDF 前進行精確修改的視覺化網頁編輯工具。自動清理無法識別某個特定橫幅、需要展開收合內容，或某個元素只需微調版面時，可以使用這種模式。

先設定網頁

視覺化編輯器與自訂轉換共用網頁轉 PDF 的頁面配置、載入、清理、PDF 內容、浮水印、安全性和中繼資料設定。重複設定不在這裡展開，可以直接查看完整的自訂轉換設定說明：

• 頁面配置包括視埠、紙張、邊界、縮放、渲染樣式、深色模式和背景。
• 頁面載入包括導覽逾時、額外等待和延遲內容載入。
• 頁面清理包括 Cookie 提示、廣告、彈出視窗、浮動小工具和固定元素。
• PDF 內容及文件設定包括頁面範圍、連結、頁首、頁尾、浮水印、安全性和中繼資料。

請在開啟編輯器前完成這些設定。編輯器中的清理操作會繼續使用目前任務的頁面清理選項；按一下建立 PDF時，則會套用先前選擇的文件設定。

開始編輯工作階段

視覺化編輯器會在你檢查和修改頁面期間保留一個遠端網頁工作階段。完成以下步驟後，再讓視覺化網頁編輯器建立 PDF。

長預覽中的點擊與定位

長網頁可能分塊擷取，編輯器仍將它們呈現為連續頁面。點擊位置會依預覽縮放與捲動位置對應回真實網頁座標，DOM 樹選取和選取框也使用同一份頁面資訊，不需要自行計算每張圖片的偏移。

互動後若選取框不再對應元素，先用工具列的重新整理更新預覽與節點資料，再繼續編輯。不要對著過期截圖連續修改。只有準備捨棄目前編輯時，才使用重新載入。

擴充功能的 Visual 有何不同

網站 Visual 操作遠端網頁，擴充功能 Visual 則直接操作目前分頁，預設將工具放在瀏覽器側邊欄，另支援匯出選取節點，並有獨立的擴充功能權限檢查。入口、設定與還原方法見擴充功能 Visual 與節點匯出。

選取與瀏覽模式

視覺化編輯器左側顯示遠端瀏覽器目前頁面的全頁截圖。這兩種模式決定了按一下視覺化網頁編輯預覽後要做什麼。

選取

需要檢查、隱藏或調整元素樣式時使用選取。按一下預覽後，編輯器會選取該位置最小且有意義的可見節點，繪製選取框，並在節點分頁中顯示詳細資料。

網頁中經常有多個元素互相巢狀。如果預覽選取了內部子元素，而你希望處理整個容器，可以在 DOM 分頁中明確選擇它的父節點。

瀏覽

需要先改變網頁本身的狀態時使用瀏覽。點擊會傳送到遠端網頁中對應的可互動元素，可用於開啟收合項目、展開手風琴內容、前往連結或觸發按鈕。

原生下拉式選單會直接在編輯器內顯示選項。選擇一個未停用的選項後，它會套用到遠端網頁；其他控制項如何回應，則取決於網站本身的實作。

工具列操作

視覺化編輯器工具列會將單一操作傳送到即時遠端頁面，再傳回更新後的預覽。

隱藏只有在選取元素後才可用。清理、瀏覽和樣式修改都會操作即時遠端頁面，因此請等待目前動作完成後再執行下一個動作。

「節點」側邊欄

視覺化編輯器的節點分頁只顯示資料，不直接修改網頁。它用來確認選取框是否對應你真正想處理的元素。

文件識別

• 標籤顯示 HTML 元素類型，例如 header、section、button 或 img。
• 選擇器顯示編輯器在遠端網頁中定位該元素所用的位置資訊。需要排查問題時，可以使用旁邊的複製按鈕儲存它。

幾何資訊

• 尺寸顯示元素目前渲染後的寬高，單位是 CSS 像素。
• 位置顯示計算後的 CSS 定位方式，例如 static、relative、absolute、fixed 或 sticky。

渲染資訊

• 顯示顯示目前計算後的版面類型。
• 可見性顯示元素是否透過 CSS 保持可見。
• 溢出顯示超出元素邊界的內容如何處理。水平和垂直數值不同時，會用斜線分開顯示。
• 外距和內距依序顯示上、右、下、左四個方向的計算值。

內容預覽

最下方會顯示一小段文字或無障礙名稱，用來協助識別節點。這裡不能修改網頁文字，視覺化編輯器目前也不提供文字編輯功能。

「樣式」側邊欄

視覺化編輯器的樣式分頁用來修改選取的元素。各輸入框會先載入即時頁面中擷取到的數值。修改需要的欄位後，按一下更新預覽，編輯器才會套用整組樣式並重新擷取結果。

狀態鎖定

狀態鎖定可以固定某種 CSS 外觀，但不會傳送對應的滑鼠或鍵盤事件：

同一個元素可以同時啟用多個狀態。清除鎖定會移除該元素上的全部三種狀態。狀態鎖只影響 CSS 外觀；需要 JavaScript 才能開啟的內容，應使用瀏覽執行真實點擊。

尺寸

寬度和高度會取代選取元素的 CSS 渲染尺寸。只填寫數字時會自動按像素處理，例如 320 會成為 320px。屬性允許時，也可以直接填寫 50%、24rem 或 auto 等標準 CSS 長度。

調整尺寸可能使相鄰內容重新排版。建立 PDF 前，請重新整理預覽並檢查頁面後面的內容是否發生意外移動。

版面

• 顯示支援 block、inline、inline-block、flex、grid 和 none。選擇 none 會把元素移出版面，周圍內容通常會填補騰出的空間。
• 可見性支援 visible 和 hidden。隱藏後仍會保留原有版面空間。
• 溢出支援 visible、hidden、auto 和 scroll。hidden 可能裁掉內容；auto 或 scroll 也可能使部分內容留在截圖區域之外。

外距和內距

兩組設定都可以分別調整上、右、下、左四個方向。

• 外距改變元素外部的間隔。負值可以拉近周圍內容，也可能造成重疊。
• 內距改變元素內容與邊框之間的間隔。

只填寫數字時會轉換為像素，也可以直接輸入 CSS 長度。空白輸入會按 0px 套用；某個方向不需修改時，應保留原值。

「DOM」側邊欄

視覺化編輯器的 DOM 分頁列出最近一次完整擷取時發現的、有意義的可見元素。展開一列可以查看子節點；選擇任意節點後，預覽會捲動到該元素並顯示選取框。

每一列會顯示 HTML 標籤，並盡可能補充簡短的 ID、類別名稱或無障礙名稱。節點數量代表目前可編輯的資料範圍。出現受限標記時，表示頁面超過了擷取上限，更深層的部分元素不會出現在清單中。重新整理或重新載入會根據目前頁面重新產生 DOM 樹。

以下情況適合使用 DOM 樹：

• 多個元素重疊，直接點擊預覽無法準確選取；
• 需要隱藏整個容器，而不是其中一個子元素；
• 元素很小或透明，難以在截圖中點擊；
• 需要在元件和其父層結構之間切換。

變更記錄與復原

視覺化編輯器側邊欄底部會記錄可復原的隱藏、樣式和狀態鎖定操作。展開變更記錄後，可以查看各項操作的時間，並按一下某筆記錄旁的復原，恢復該元素修改前的狀態。

復原單筆記錄不會從頭重播整個網頁。瀏覽操作、原生下拉選擇、清理和頁面跳轉並不是通用的復原步驟。重新載入或跳轉也可能重建頁面並清空目前顯示的變更記錄。

編輯時間與工作階段失效

視覺化編輯器側邊欄頂部會顯示剩餘編輯時間。沒有動作正在執行時，標籤會說明目前受閒置時間還是帳戶剩餘額度限制；進入最後 30 秒後，倒數計時會改變顏色。

每個被接受的編輯動作都會結算已經經過的編輯時間，並傳回最新額度。仍有時間時，閒置倒數會重新開始。如果因長時間沒有操作而失效，需要重新開啟編輯器，先前的視覺化修改會被清除。如果帳戶額度已經用完，請回到任務進度，等待額度重設或取得更多轉換時間。

建議的編輯順序

實際清理設定。只停用誤刪內容所屬的類別，更容易找出原因。截圖使用英文介面。

為了得到更穩定的結果，可以先執行自動清理，再使用瀏覽展開需要的內容，然後切換到選取，隱藏或調整指定元素。最後檢查 DOM 樹和完整預覽。互動操作後使用重新整理，只有準備放棄目前頁面狀態時才使用重新載入。

如果網頁只需要標準清理或文件設定，自訂轉換不需保持即時編輯工作階段，也能完成相同的轉換。

相關視覺化網頁編輯指南

• 所有共用的配置、載入、清理、浮水印、安全性和中繼資料選項，請查看自訂網頁轉 PDF 設定。
• 頁面不需手動編輯，只需要連續整頁擷取時，選擇快速 URL 轉 PDF。
• 選取位置與即時頁面不一致、操作被拒絕或編輯工作階段過期時，查看視覺化編輯器疑難排解。
• 先瞭解轉換時間與帳戶權限，也可以返回線上網頁轉 PDF 工具開始新的視覺化編輯工作階段。