您可以在线找到完美的文章，并使用浏览器打印功能将其保存为 PDF。生成的 PDF 看起来与您正在阅读的网页完全不同。图像丢失。文本重叠。屏幕上干净易读的布局在 PDF 页面上却是一团糟。浏览器Web到PDF的转换很方便，但不精确，产生的输出近似而不是复制原始网页。
浏览器打印到 PDF 功能使用网页的打印 CSS 样式表，而不是屏幕 CSS。 Web 开发人员经常创建专门用于打印的简化布局，删除导航、侧边栏和广告。此打印布局可能看起来与您在屏幕上看到的有很大不同。这种差异是有意为之的，旨在产生更清晰的打印输出，但它可能会令人惊讶。
为什么浏览器打印输出与屏幕显示不同
网页使用两种独立的 CSS 样式表：一种用于屏幕显示，一种用于打印。屏幕样式表控制您在浏览器中看到的内容。打印样式表控制打印或另存为 PDF 时显示的内容。这两个样式表可以指定完全不同的布局、字体、颜色甚至内容。
PDF 格式转换还会去除交互元素。需要单击或悬停才能显示内容的下拉菜单、选项卡式内容、轮播和手风琴部分会产生不完整的 PDF 输出。 PDF 仅捕获这些元素的当前可见状态，这可能是它们的折叠或隐藏状态。
打印样式表解释了大部分的惊喜。
打印样式表是大多数布局意外背后的罪魁祸首。
初始页面加载后由 JavaScript 加载的动态内容可能不会出现在 PDF 中。无限滚动页面、延迟加载的图像以及需要用户交互才能加载的内容尤其容易受到攻击。浏览器打印 DOM 中当前加载的内容，这可能只是整个页面内容的一小部分。
常见打印问题及其解决方法
PDF 输出中丢失图像通常是由于打印样式表隐藏图像以节省墨水，或者是由于启动打印时尚未加载的延迟加载图像造成的。滚动浏览整个页面以在打印前触发延迟加载。在浏览器开发人员工具中禁用打印样式表以强制使用屏幕布局进行打印。
WukongPDF 可以处理生成的PDF 查看 输出以调整页面尺寸并删除不需要的元素，但它无法恢复浏览器在打印捕获期间忽略的内容。
使用阅读器模式实现更清晰的 PDF 输出
大多数浏览器都包含一个阅读器模式，可以提取主要内容并以干净的单列格式显示。打印为 PDF 之前激活阅读器模式。阅读器模式输出比完整网页更简单，但更可靠，文本流程一致，不会丢失内容。
专用网页转 PDF 工具与浏览器打印
专用的网页捕获工具可生成比浏览器打印功能更可靠的 PDF 输出。这些工具完全渲染页面，等待所有内容加载，并捕获屏幕布局而不是打印布局。输出更接近您在屏幕上看到的内容。
必须准确捕获为 PDF 的网页，测试浏览器打印功能和专用捕获工具。比较输出。为一个网页产生最佳结果的工具可能不适用于另一个网页。网页设计的可变性意味着没有一种方法可以完美地适用于所有页面。
处理多页网页内容
PDF 输出中跨多个打印页面的长文章通常会出现尴尬的分页符，即在句子中间切入图像或分割段落。浏览器分页算法不理解内容边界。它根据纸张尺寸在固定位置分页。
使用浏览器打印预览来确定将出现分页符的位置。调整打印比例、边距或纸张尺寸，将分页符移动到更自然的位置。稍微缩小比例（从 100% 到 95%）可以充分移动分页符，以避免最严重的内容分割。
对于分成多个 PDF 页面的文章，请考虑在捕获后使用 PDF 编辑器来组合碎片内容。裁剪单个页面图像并将它们重新组合成一个连续的文档，该文档比浏览器强加的分页符更自然。
保留交互式和动态内容
嵌入视频、音频或交互式图表的网页在 PDF 输出中会丢失这些元素。 PDF 捕获当前状态的静态图像。对于交互元素必不可少的内容，请在 PDF 中包含原始网页的 URL，以便读者可以访问完整的交互版本。
捕获的 PDF 中的链接可能无法单击。浏览器打印功能有时会将文本转换为不保留超链接的矢量轮廓或光栅图像。通过单击已知链接来验证链接功能来测试 PDF 输出。如果链接丢失，请使用 PDF 编辑器手动将其添加回来。
社交媒体嵌入、评论部分和动态加载的相关内容很少能在打印到 PDF 的过程中幸存下来。如果这些元素很重要，请将它们单独捕获为屏幕截图，并在捕获主要内容后将它们插入到 PDF 中。
使用响应式布局设计的网页可能会为打印引擎提供与屏幕不同的布局。在手机上看起来干净的移动响应式设计可能会打印为带有过多空白的窄列。在不同的浏览器窗口宽度下测试打印输出可以确定产生最佳 PDF 输出的窗口大小。
使用 CSS Grid 或 Flexbox 进行布局的网页在打印时可能会出现不可预测的回流，因为打印样式表通常会用简化的线性布局替换复杂的屏幕布局。屏幕上并排显示的内容在 PDF 中垂直堆叠。
从 Google Fonts 或 Adobe Fonts 等 Web 服务加载的自定义字体可能无法用于浏览器打印引擎。打印输出替换系统字体，更改文本外观、行长度和分页符。
为了节省墨水，默认情况下通常不会打印通过 CSS 应用的背景图像和渐变。当背景被移除而浅色文本保留时，依靠深色背景和浅色文本来提高可读性的部分可能会变得不可见。
具有固定标题或粘性导航栏的网页可以出现在每个页面上的 PDF 内容的中间。这些元素是相对于视口而不是页面内容定位的，并且它们的固定定位在 PDF 转换中丢失。
打印时浏览器的缩放级别会影响 PDF 输出。以 100% 缩放打印的页面与以 75% 缩放打印的同一页面产生不同的结果。缩放级别会更改文本大小和页数。
从移动浏览器打印网页会产生与从桌面浏览器打印不同的结果，因为移动浏览器通常向打印引擎提供页面的简化版本。
在登录或付费专区后面的网页，打印的 PDF 可能包含仅在身份验证后才可见的内容。 PDF 成为经过验证的内容的记录，应采取适当的安全措施。
修改网页外观的浏览器扩展（例如广告拦截器、暗模式扩展和自定义样式表）会影响打印输出。打印的 PDF 反映了扩展程序呈现的修改后的页面。
将网页另存为 PDF 本质上是将动态媒体快照转换为静态格式。转换会及时捕获页面，冻结几分钟后可能更改的内容。
出于存档目的，从网页保存的 PDF 应在文档元数据或首页中包含 URL 和访问日期，以便将来的读者可以找到原始来源。
具有 React、Angular 或 Vue 等重型 JavaScript 框架的网页可能在 PDF 输出中几乎不渲染任何内容，因为打印引擎在 JavaScript 完成构建 DOM 之前捕获页面。页面加载后等待几秒钟再打印，以便框架有时间完成渲染。
以打印为目标的 CSS 媒体查询可以隐藏或显示特定元素。精心设计的打印样式表包括主要内容，不包括导航、广告和评论。设计不当或缺失的打印样式表会退回到屏幕布局，这可能无法很好地转换为 PDF 的固定页面尺寸。
打印需要身份验证的页面时，浏览器缓存会影响 PDF 输出。如果浏览器已缓存凭据，则打印输出将包含经过身份验证的内容。如果会话已过期，打印输出可能会显示登录页面而不是预期内容。打印前通过滚动整个页面来验证页面内容。
打印包含来自其他域的嵌入 iframe 的网页可能会在 iframe 内容应显示的位置产生空白区域。跨域限制阻止打印引擎访问来自不同域的 iframe 内容。 PDF 输出在屏幕上显示嵌入内容的空矩形。
对于重要的网页捕获，请在打印为 PDF 之前使用浏览器的“另存为”功能保存完整的网页、HTML 和资源。保存的副本可作为页面外观的参考，您可以将 PDF 输出与保存的副本进行比较，以确定打印转换期间丢失的内容。