浏览器扩展:将当前网页保存为 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 横幅尝试修复。

继续阅读