何时使用整页截图，何时导出 PDF

网页可以保存为一张很长的图片，也可以保存为分页的 PDF。两种格式都保留内容，但文件离开浏览器后表现不同。选择哪种格式，取决于读者需要精确查看版面、搜索文字，还是打印。

本文用同一个示例页面比较两种格式，列出各自的失败情况，并介绍第三种方式：逐屏截图后导出为可搜索的 PDF。示例中的所有数字都来自一个以桌面宽度截取的长文章页面。

两种格式的定义

整页截图是整个可滚动页面的一张位图。宽度与浏览器窗口相同，高度随页面增长，通常可达 10,000 像素以上。页面中的每个像素都按渲染结果记录，包括字体、图片和颜色。

浏览器的 PDF 导出由打印引擎生成。浏览器会按纸张重新排版页面，应用网站的打印样式表（如果有），并将内容拆分为多页。文字通常保持为真正的文本，因此可以选中、搜索和复制，链接也常常仍然可用。

两者的区别在于生成结果的依据。截图记录屏幕上的显示结果，浏览器 PDF 则为打印重新渲染页面。

本文使用的示例页面

下面的比较均使用同一个以文字为主的文章页面。该页面包含吸顶的页头、一个 Cookie 横幅、14 张滚动后才加载的内联图片，以及底部的评论组件。在宽 1920 像素的桌面窗口中，整个页面高 12,000 像素。

这类页面在博客、文档站点和新闻文章中很常见。它同时包含打印规则、懒加载图片和后加载的组件，因此两种格式的结果差异最大。

像素、点与纸张

截图以像素计量。PDF 页面以点计量，72 点等于 1 英寸。浏览器打印时将 1 个 CSS 像素视为 1/96 英寸，因此一张 A4 纸约容纳 794 × 1123 个 CSS 像素，一张美国 Letter 纸约容纳 816 × 1056 个 CSS 像素。

这就是为什么宽 1920 像素的页面生成的浏览器 PDF 通常与屏幕显示不一致。打印引擎可用的宽度约为 800 像素，因此它要么把内容重排为更窄的栏，要么缩小内容。截图保留完整的 1920 像素宽度，不做重排。

整页截图更适合的情况

• 精确的视觉记录。 设计评审、缺陷报告和前后对比需要的是页面在屏幕上的样子，而不是打印后的样子。
• 打印样式较弱的页面。 许多网站在打印时会隐藏图片、折叠版面或去掉背景。截图不受打印规则影响。
• 类应用页面。 仪表盘、地图和基于 canvas 的工具在打印时常常变成空白页或内容错乱。
• 在聊天或幻灯片中分享。 一张图片可以直接放进消息、工单或幻灯片，无需 PDF 查看器。

截图的缺点是体积和文字。一张高的 PNG 可能达到数 MB。截图中的文字是像素，要搜索就需要 OCR。

视觉评审与比较

设计和 QA 团队会在发布前后比较同一页面。宽度相同的两张截图可以用 Compare Images 进行比较，它提供滑块、淡入淡出、并排视图和像素差异视图。两份 PDF 则难以比较，因为一行文字的改动就可能使之后的每个分页位置都发生变化。

只有两次截取使用相同设置时，比较才有意义。窗口宽度、等待时间和广告拦截设置都需保持一致，否则差异视图会显示页面中并不存在的变化。

无法正常打印的页面

有些类型的页面几乎总会在打印引擎中失败：

• 数据加载后在 canvas 元素中绘制图表的仪表盘；
• 按窗口大小自适应的地图视图和图片查看器；
• 把内容放在可滚动面板中而非文档 body 中的单页应用；
• 打印样式表隐藏主要内容，从而阻止正常打印的页面。

对于这些页面，打印预览会显示空白页、一个被裁切的屏幕，或只显示导航栏。截图记录的是屏幕上绘制的内容，不受打印规则影响。

长图的尺寸与大小限制

长截图存在实际限制。一张 1920 × 12,000 像素的文字文章 PNG 通常为 3 至 8 MB，同一图片保存为质量 80 的 JPEG 时往往只有其三分之一大小。部分图片查看器和聊天应用会把过高的图片缩小到无法阅读文字的程度，需要打开原文件才能看清。

发送长截图之前，先检查像素尺寸和文件大小。Screenshot Resolution Checker 显示宽度、高度、文件大小和宽高比，聊天或工单系统有上传限制时，可以使用 Image Compressor 压缩文件。

PDF 导出更适合的情况

• 阅读和搜索。 可选中的文字支持搜索、复制和屏幕阅读器。
• 打印。 页面按纸张尺寸分页，而不是一条很长的图片。
• 文章存档。 以文字为主且打印样式良好的页面，生成的文件整洁紧凑。
• 文件较小。 基于文本的 PDF 通常比同一页面的图片小得多。

PDF 的缺点来自重新排版。吸顶的页头可能在每一页重复出现，懒加载的图片可能缺失，部分内容也可能因打印样式表隐藏而消失。PDF 呈现的是打印引擎的输出结果，可能与屏幕显示不一致。

示例 PDF 中出现的问题

示例文章打印为 9 页 A4。出现了三个截图中没有的问题。

1. 吸顶的页头出现在每一页顶部，遮住了第 2 至 9 页前两行文字。
2. 首屏以下的 14 张图片中，有 5 张显示为空白方框，因为打印引擎排版时它们尚未加载。
3. 评论组件缺失，因为打印样式表将其隐藏。

Cookie 横幅也被打印在第 1 页上，覆盖了标题。这些问题都没有改变文字内容，因此 9 页的文字仍可搜索和复制。

打印样式表有帮助的情况

良好的打印样式表会去掉导航、广告和侧边栏，设置易读的字号，并在链接文字后打印链接地址。文档站点和长篇内容发布方通常具备这类样式表。对这些页面，浏览器 PDF 比任何截图都更整洁。

打开打印预览并检查三个标志：导航已被去掉，正文宽度占满页面，图片位于正文栏内。三项均满足时，直接打印为 PDF 即可。

影响 PDF 结果的打印对话框选项

浏览器打印对话框中的四个选项决定了大部分结果。Paper size 设置内容重排所依据的页面宽度，因此 A4 和 Letter 的分页位置可能不同。Scale 缩放版面；将比例设为 80% 至 90%，通常可以让较宽的表格保持在一页内，而不会切掉右侧边缘。

Margins 设为最小可以增加内容宽度，但在某些打印机上可能裁切文字。Headers and footers 会添加页面标题、URL、日期和页码，对存档有用，对讲义则是多余的信息。Background graphics 决定彩色方框和横幅图片是否出现，前文已介绍。

对重要 PDF，应将所用选项记录在文件名或备注中。否则，一个月后对同一页面重新导出时，分页可能不同，看起来像页面内容已变化。

决策表

需求	整页截图	浏览器 PDF
与屏幕完全一致	是	通常不一致
可选中、可搜索的文字	仅 OCR 之后	通常可以
可点击的链接	否	通常可以
按标准纸张打印	效果差	可以
适用于仪表盘和 Web 应用	可以	常常失败
便于粘贴到聊天或幻灯片	是	否
长文字页面的文件大小	较大	较小

一个简单的判断标准：如果需要有人查看，就截图；如果需要有人阅读、搜索或打印，就导出 PDF。

根据读者选择格式

当读者明确时，这张表最好用。设计师需要截图。律师、审计人员或学生通常需要可引用文字的 PDF。

决策表未涵盖的情况

有些页面两列都不太适合。无限滚动的信息流没有底部，整页截图要么停在任意高度，要么永远无法完成，而打印引擎只能打印已加载的内容。登录后才能访问的页面，如果工具不与浏览器共享会话，也无法被截取。

对于无限滚动的信息流，应截取固定数量的屏幕，而不是整个页面。对于需要登录的页面，应在会话处于活动状态的浏览器中截取。两种情况都指向下文的混合方式。

选择前的两分钟测试

如果无法确定，可以用同一个页面生成两种文件并进行比较。将页面打印为 PDF，再拍摄一张整页截图，然后将两个文件并排打开。

按顺序检查四项：缺失的图片、重复出现的页头、被切断的表格，以及无法选中的文字。问题较少的格式适用于该网站。同一网站的页面通常表现一致，因此一次测试通常就能确定整批页面的格式。

混合方式：从视口序列到分页 PDF

第三种方式结合了截图的视觉准确性和 PDF 的分页能力。逐屏截取页面，然后将各帧合并为一个 PDF，每屏一页，并在图片上叠加 OCR 文字层。

在 Temposhot 中，Auto Capture 可以以浏览器窗口为源完成此操作。将 Stop condition 设为 Screenshots，将 Key press 设为 Space，将 Interval 设为 1 秒。每一帧在下一次按键前保存。在结果面板中选择 PDF，即可导出带有识别文字的可搜索 PDF。Key press 自动化需要 Temposhot Pro。

对于 URL 列表，Website Capture 可以将每个页面以 Full page 方式截取，并将会话导出为 PDF，每个 URL 一页。已有的长截图可以用 Split Image 切分为页面大小的部分，再用 Image to PDF 合并。若要为截图 PDF 添加文字层，可使用 Screenshot to Searchable PDF。

方法：一个浏览器窗口，每页一屏

在示例中，浏览器窗口每屏显示约 1,000 像素的内容。在大多数浏览器中，按一次 Space 滚动的距离略小于一整屏，因此 12,000 像素的文章需要 13 帧才能到达底部。将数量设为 14，会多出一帧作为备用，如果它与最后一屏重复，可将其删除。

1. 准备页面

   打开文章，关闭 Cookie 横幅，滚动到底部再回到顶部，使懒加载图片完成加载。将浏览器窗口调整为希望在 PDF 中使用的宽度。

2. 设置选项

   在 Auto Capture 中应用上文所示的设置。5 s 的倒计时为点击页面留出时间，使 Space 按键能发送到页面中。

3. 选择窗口

   打开源选择器，选择 Windows，再选中浏览器窗口。点击 Start Capture。

4. 检查各帧

   当面板显示 Capture complete 时，取消勾选与上一屏重复的最后一帧。

5. 导出 PDF

   选择 PDF。生成的可搜索 PDF 每页一屏，按截取顺序排列。

方法：多个 URL 整页截取

当任务涉及 20 或 200 个页面时，浏览器窗口就不适合作为源。Website Capture 接受 URL 列表，并为每一行按各自的设置保存一张图片。它在独立的 WebKit 会话中打开每个页面，因此截取的是未登录访客看到的页面。

对于文章页面，Load 加 2 秒的 Delay 比 Network idle 更稳妥，因为带有统计或聊天组件的页面会持续轮询，可能导致超时。Hide only 会从图片中去掉同意横幅，但不会替用户作出同意或拒绝的选择。在结果面板中选择 PDF，即可得到一个可搜索的 PDF，每个 URL 一页。

方法：将一张长截图转为可打印的页面

已有的整页 PNG 无需重新截取，即可在浏览器中分页。1920 × 12,000 的示例会被切分为 5 段，每段 2,400 像素高。每段的宽高比为 4:5，可以在 A4 纸上留出边距后放下。

固定网格可能在段落边界处将一行文字切成两半。切分后应检查每个边界。如果切割点落在标题或表格中，使用 Auto Capture 的视口序列可以避免这个问题，因为每一屏都在窗口边界处结束。

提交前的实用建议

1. 先预览打印效果。 打开浏览器的打印对话框，逐页浏览预览。如果效果正确，浏览器 PDF 是最快的选择。
2. 颜色或图片缺失时开启背景图形。 在打印对话框中开启 Background graphics。
3. 整页截取前先滚动一次页面，使懒加载图片显示出来。懒加载条目解释了其原因。
4. 文字较多的截图使用 PNG。 JPEG 压缩会模糊小字，也会降低 OCR 的准确率。
5. 重要记录两种格式都保留。 截图证明页面当时的样子，PDF 便于搜索文字。

整页截图的故障排查

现象	可能原因	修改方法
图片位置显示灰色方框	截取时懒加载图片尚未加载	将 Delay 设为 2 至 5 秒，或在窗口截取前滚动页面一次
页头出现在图片中间位置	滚动拼接截取时吸顶页头被重绘	在该行中点击 Render preview，批量运行前检查图片
Cookie 横幅遮住内容	新访客看到横幅	将 Cookies 设为 Reject banners 或 Hide only
某个 URL 截取失败	页面未达到 Network idle	将 Wait until 改为 Load，然后重试该行
放大后图片模糊	JPEG 质量过低	使用 PNG，或将 JPEG 质量提高到接近 100

Cookie 处理只能尽力而为。部分自定义的同意管理系统仍会出现在图片中，这些页面需要人工检查。

不重复保存两种文件

对于需要留存的记录，应将截图和 PDF 放在同一名称下并列保存。为每个页面建立一个文件夹，并在文件夹名称中加入截取日期，便于日后审计。

加快混合方式的快捷键

通过键盘启动和停止运行，视口方式会更快。浏览器位于前台时，Temposhot 的 Capture 菜单可以使用。

常见问题

整页截图能否搜索？

可以，但需先进行 OCR。在 Temposhot 中将帧导出为 PDF 时会添加识别出的文字，而 Extract Text from Image 可以从单张图片中提取文字。

为什么我的浏览器 PDF 与页面显示不同？

浏览器会为纸张重新排版页面，并应用网站的打印样式表。大部分差异来自打印时被隐藏的元素、吸顶页头和懒加载图片。

哪种格式更适合法律或合规记录？

截图精确显示屏幕上出现过的内容，这通常正是记录所需的。许多团队还会同时保留 PDF 以便查找文字。具体要求应以接收记录的一方为准。

整页截图高到什么程度会成为问题？

没有统一的上限，但可读性会最先下降。一张 12,000 像素高的图片缩放到笔记本屏幕大小后，正文会缩小到难以阅读的程度，部分上传表单也会拒绝过大的文件。对于远高于此的页面，应切分图片，或使用视口序列。

Website Capture 能否截取需要登录的页面？

不能。它在私有会话中加载每个 URL，不使用用户自己浏览器的 Cookie。需要登录的页面将以未登录访客的视角被截取。如需截取，请在已登录的浏览器窗口中使用 Auto Capture。

截图 PDF 中的 OCR 文字是否与浏览器 PDF 一样准确？

不一样。浏览器 PDF 保存的是原始文字，而 OCR 从像素中识别文字，可能误读小字、特殊字体和公式。使用较大的窗口宽度截取 PNG 帧，可以为 OCR 提供最佳输入。

需要保存允许保存的页面吗？

Temposhot 将页面截取为截图，并在 Mac 上导出为可搜索的 PDF。参见 在 Mac 上将截图保存为 PDF，或在 截图 PDF 与浏览器“存储为 PDF”的比较 中比较两种途径。