☰

按照浏览器窗口中的显示打印网页

tag-icon • tag-icon google-chrome browser printing
按照浏览器窗口中的显示打印网页

如何准确打印浏览器中显示的网页。

例如，当我尝试打印以下网页时，打印预览会显示该网页的文本，但显示的不是英文，而是一些奇怪的字符： https://photographylife.com/what-is-aperture-in-photography#what-is-aperture

在此处输入图片描述

我在 Chrome 开发者工具中将渲染设置更改为“打印”和“屏幕”选项，如https://superuser.com/a/1271790/886900但它并没有解决问题。

编辑 1：我的 Chrome 浏览器版本是“版本 79.0.3945.130（官方版本）（64 位）”。我发现当我在 MAC Catalina 中使用它时，我遇到了奇怪的字符问题，但当我尝试在 Windows10 机器中打印相同的 URL 时，我没有遇到这个问题。我不知道这里有什么区别，如果有人能指出如何让它在 MAC 中也能工作就好了

答案1

使用 Ctrl-PrtSc 将屏幕复制到剪贴板。然后您可以在 Windows Paint 中粘贴图像（Ctrl-V）并打印。

答案2

我对解决这个问题的最佳猜测是：

  • 打开开发者工具（Linux/Windows 上按 Ctrl+Shift+I）
  • 查找设备工具栏（Linux/Windows 上按 Ctrl+Shift+M）
  • 在缩放下拉菜单中删除“自动调整缩放”处的勾选（可能是显示“100％”）
  • 按照你的需要设置页面的宽度（对响应式网站可能会有所不同）
  • 从设备工具栏中的三个点菜单中选择“捕获全尺寸屏幕截图”。

使用此过程将在您的下载文件夹中创建一个 png，在最佳情况下，它看起来与您在屏幕上看到的完全一样。打印前请仔细检查，因为结果有时可能非常奇怪，并且捕获可能需要很长时间。我很确定，这不是您想要的，但这是我能想到的最好的。它适用于 Chrome 79.0.3945.130，但无法适用于 Chromium 73.something。

我附上了结果（好的和坏的在本例中，我们将您提供的网站的屏幕截图 (case) 添加到此帖子 (均被截断以符合 <2MB 的 imgur 要求)。

答案3

有多个建议答案在网上找到的这个问题的解决方法是使用“开发人员”菜单将渲染/模拟器设置更改为“屏幕”，但这些方法很少适用于交互式内容或可能具有奇怪的@media 样式的内容。其他解决方案讨论了各种插件（绿射，网页截图，打印版， ETC。）。

我使用的不需要插件或 screenCSS 渲染选项的 Chrome 2024 工作流程如下：

  1. 点击 ”文件“ 菜单
  2. 点击 ”将页面另存为...“
  3. 将格式更改为“网页，单个文件“
  4. 保存文件后，打开并打印（或另存为 PDF）

希望有帮助！

相关内容