可视化编辑器
在生成 PDF 前选择、隐藏或调整网页元素：了解 Visual 的 DOM 树、样式、撤销、长预览定位，以及扩展编辑的区别。
本文的远程浏览器、登录和额度说明针对网站的云端转换。如果你已安装开发版扩展，想保存当前已打开的网页，请看浏览器扩展使用指南。
可视化编辑器是用于在生成 PDF 前进行精确修改的可视化网页编辑工具。自动清理无法识别某个特定横幅、需要展开折叠内容，或者某个元素只需微调布局时，可以使用这种模式。
需要登录
可视化编辑器只向注册用户开放。完成邮箱验证后，账户才会获得每日免费转换时间。
先配置网页
可视化编辑器与自定义转换共用网页转 PDF 的页面布局、加载、清理、PDF 内容、水印、安全和元数据设置。重复设置不在这里展开，可以直接查看完整的自定义转换设置说明：
- 页面布局包括视口、纸张、页边距、缩放、渲染样式、深色模式和背景。
- 页面加载包括导航超时、额外等待和延迟内容加载。
- 页面清理包括 Cookie 提示、广告、弹窗、悬浮挂件和固定元素。
- PDF 内容及文档设置包括页码范围、链接、页眉、页脚、水印、安全和元数据。
请在打开编辑器前完成这些设置。编辑器中的清理操作会继续使用当前任务的页面清理选项；点击生成 PDF时，则会应用此前选择的文档设置。
开始编辑会话
可视化编辑器会在你检查和修改页面期间保持一个远程网页会话。完成以下步骤后，再让可视化网页编辑器生成 PDF。
选择可视化编辑器并输入网址
选择可视化编辑器，粘贴完整、可公开访问的 http:// 或 https:// 网址，检查共用设置后开始转换。
等待可编辑预览
系统会打开网页，执行所选的加载和清理规则，生成全页截图，并整理出有意义的可见元素。整个准备阶段最多运行三分钟。
进行有针对性的修改
使用选择检查元素，或使用浏览操作网页控件。选中元素后，右侧栏会显示下面介绍的编辑功能。
生成 PDF
检查完整预览，点击生成 PDF。系统会根据打开编辑器前选择的文档设置转换当前远程页面。
长预览中的点击和定位
长网页可能分块截图，但编辑器仍把它们显示为一个连续页面。点击位置会结合预览缩放和滚动位置映射回真实网页坐标；DOM 树选择和选中框也使用同一份页面信息，不需要你计算每一张图片的偏移。
页面交互后如果选中框与元素不对应，先用工具栏的刷新更新预览和节点信息，再继续编辑。不要对着已经过期的截图连续修改。只有准备丢弃当前编辑时才使用重新加载。
扩展 Visual 有什么不同
网站 Visual 操作远程网页，扩展 Visual 则直接操作当前标签页，默认把工具放在浏览器侧边栏。后者还可以导出选中节点，且使用独立的扩展权限检查。具体入口、配置和恢复方法见扩展 Visual 与节点导出。
选择与浏览模式
可视化编辑器左侧显示远程浏览器当前页面的全页截图。这两种模式决定了点击可视化网页编辑预览后要做什么。
选择
需要检查、隐藏或调整元素样式时使用选择。点击预览后，编辑器会选中该位置最小且有意义的可见节点，绘制选中框，并在节点页签中显示详情。
网页中经常有多个元素互相嵌套。如果预览选中了内部子元素，而你希望处理整个容器，可以在 DOM 页签中明确选择它的父节点。
浏览
需要先改变网页本身的状态时使用浏览。点击会发送到远程网页中对应的可交互元素，可用于打开折叠项、展开手风琴内容、访问链接或触发按钮。
原生下拉列表会直接在编辑器内显示选项。选择一个未被禁用的选项后，它会应用到远程网页；其他控件如何响应，则取决于网站自身的实现。
浏览操作可能离开当前页面
发生跳转或较大页面变化后，旧截图和节点信息可能不再对应实时页面。如果编辑器要求刷新，请先点击刷新，再继续选择或修改元素。
工具栏操作
可视化编辑器工具栏会把单个操作发送到实时远程页面，然后返回更新后的预览。
| 操作 | 作用 | 适用情况 |
|---|---|---|
| 隐藏 | 隐藏当前选中的节点，并从编辑器的节点信息中移除其所有子节点。 | 不希望 PDF 中出现某个横幅、按钮、图片、段落或容器。 |
| 清理 | 按照打开编辑器前选择的清理类别再次处理当前页面，然后重新抓取。 | 初次准备完成后又出现了弹窗或固定元素。 |
| 刷新 | 不重新加载网址，只重新抓取远程页面的当前状态。 | 点击、下拉选择、动画或延迟加载改变了页面内容。 |
| 重新加载 | 重新加载当前网址，再次执行清理，并重建截图和节点信息。 | 页面已经进入异常状态，需要从头恢复。当前可视化修改可能丢失。 |
隐藏只有在选中元素后才可用。清理、浏览和样式修改都会操作实时远程页面，因此请等待当前动作完成后再执行下一个动作。
“节点”侧边栏
可视化编辑器的节点页签只显示信息，不直接修改网页。它用于确认选中框是否对应你真正想处理的元素。
文档标识
- 标签显示 HTML 元素类型，例如
header、section、button或img。 - 选择器显示编辑器在远程网页中定位该元素所用的地址。需要排查问题时，可以使用旁边的复制按钮保存它。
几何信息
- 尺寸显示元素当前渲染后的宽高，单位是 CSS 像素。
- 位置显示计算后的 CSS 定位方式，例如
static、relative、absolute、fixed或sticky。
渲染信息
- 显示显示当前计算后的布局类型。
- 可见性显示元素是否通过 CSS 保持可见。
- 溢出显示超出元素边界的内容如何处理。横向和纵向数值不同时，会用斜杠分开显示。
- 外边距和内边距依次显示上、右、下、左四个方向的计算值。
内容预览
最下方会显示一小段文字或无障碍名称，用于帮助识别节点。这里不能修改网页文字，可视化编辑器目前也不提供文字编辑功能。
“样式”侧边栏
可视化编辑器的样式页签用于修改选中的元素。各输入框会先载入实时页面中抓取到的数值。修改需要的字段后，点击更新预览，编辑器才会应用整组样式并重新抓取结果。
状态锁定
状态锁定可以固定某种 CSS 外观，但不会发送相应的鼠标或键盘事件：
| 状态 | 效果 |
|---|---|
| 悬停 | 固定元素的 :hover 外观，适合通过 CSS 显示的悬停菜单、高亮链接或提示。 |
| 聚焦 | 固定 :focus 外观，但不会真的移动键盘焦点。 |
| 按下 | 固定 :active 或按压外观，但不会点击该元素。 |
同一个元素可以同时启用多个状态。清除锁定会移除该元素上的全部三种状态。状态锁只影响 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 秒后，倒计时会改变颜色。
每个被接受的编辑动作都会结算已经经过的编辑时间，并返回最新额度。仍有时间时，无操作倒计时会重新开始。如果因长时间无操作而失效，需要重新打开编辑器，之前的可视化修改会被清除。如果账户额度已经用完，请返回任务进度，等待额度重置或获取更多转换时间。
编辑器使用独立的远程浏览器
它不会携带个人浏览器中的登录状态、Cookie、扩展程序或内网访问能力。请使用能够从公网独立打开的页面。
推荐的编辑顺序
实际页面清理设置。只关闭误删内容所对应的类别，比一次停用所有清理更容易判断原因。
为了得到更稳定的结果，可以先执行自动清理，再使用浏览展开需要的内容，然后切换到选择，隐藏或调整指定元素。最后检查 DOM 树和完整预览。交互操作后使用刷新，只有准备放弃当前页面状态时才使用重新加载。
如果网页只需要标准清理或文档设置，自定义转换无需保持实时编辑会话，也能完成相同的转换。
相关可视化网页编辑指南
- 所有共用的布局、加载、清理、水印、安全和元数据选项，请查看自定义网页转 PDF 设置。
- 页面无需手动编辑，只需要连续整页截图时，选择快速 URL 转 PDF。
- 选择位置与实时页面不一致、操作被拒绝或编辑会话过期时，查看可视化编辑器故障排除。
- 先了解转换时间与账户权限，也可以返回在线网页转 PDF 工具开始新的可视化编辑会话。