如何在 Web 浏览器中获取 WYSIWYP（打印您看到的内容）？

Question

当我从浏览器打印网页时，我希望在纸上打印出我在浏览器中看到的内容。准确地说：我希望浏览器以相同的方式呈现相同的页面内容，除了在具有无限高度的画布上，然后以特定于打印的方式决定如何在纸的物理页面上分配结果。

然而，这根本不是许多网站上发生的事情。他们可能会打印完全不同的东西。我从来没有要求浏览器这样做，我不希望它发生。

有没有办法得到我想要的东西（除了截取屏幕截图，煞费苦心地将它们剪切和粘贴在一起，然后打印生成的图像）​​？有没有办法告诉我使用的网络浏览器（Firefox、Chrome、Safari、IE 或 Opera）：“打印此页面，就像在任意高度的浏览器窗口上呈现它一样”？

（PS：另请参阅：使用屏幕 CSS 从浏览器打印？）

Answer 1

Chrome 在开发人员工具中内置了此功能，但位于一个非常不明显的位置。

• 打开开发者工具（Windows系统：F12或Ctrl+ Shift+ I，苹果： Cmd+ Opt+ I）
• 单击自定义和控制 DevTools汉堡菜单按钮，然后选择更多工具 > 渲染设置（或在较新版本中渲染）。
• 选中“渲染”选项卡上的“模拟打印介质”复选框，然后选择“屏幕”介质类型。

主要从这个答案中引用。请参阅下面的区别。

现在，当您打印时，打印出来的内容将与您看到的一模一样。确保在打印之前保持开发人员工具打开。关闭开发人员工具后，渲染设置将重置为正常。

注意：此答案的灵感来自https://superuser.com/a/568847/176146。但是这个答案的实际文本来自lmeurs的答案。它几乎完全相同，但我们正在尝试与他们的答案完全相反，因此不是将覆盖设置为Print而是将其设置为Screen。

Answer 2

为什么我的网页无法打印我在浏览器中看到的内容？

您的某些网页的打印方式不同的原因是它们具有打印样式表。

什么是打印样式表？

打印样式表格式化网页，因此在打印时，它会自动以用户友好的格式打印。打印样式表已经存在很多年了，并且已经写了很多。然而，很少有网站实现它们，这意味着我们留下的网页令人沮丧地无法正确打印到纸上。

值得注意的是，很少有网站使用打印样式表作为：

• 打印样式表极大地提高了可用性，尤其是对于包含大量内容的页面（例如这个！）
• 它们非常快速且易于设置

一些网站确实提供了页面的打印友好版本的链接，但这当然需要设置和维护。它还要求用户注意到屏幕上的这个链接，然后在他们打印页面的常规方式之前使用它（例如通过选择屏幕顶部的打印按钮）。但是，当同时打印多个网页（例如跨越多个网页的文章）时，打印友好版本非常有用。

打印网站时源禁用打印样式表 (CSS)

如何禁用打印样式表？

我最近需要完全按照屏幕上显示的方式获取网站的快照。也就是说，我想要背景颜色，我想要广告，我想要完整的布局。

一种选择是在向下滚动页面时连续截取屏幕截图，然后在 Photoshop 中将它们拼凑在一起。这很耗时，并且会留下低分辨率 (72dpi) 的图像。

另一种方法是打印页面，然后“另存为”PDF，而不是实际打印。这对于没有为打印页面和查看页面定义不同布局的页面非常有效。

对我来说不幸的是，在网站上包含“打印”样式表变得越来越流行，当用户尝试打印网站时，它定义了新的页面样式。这是在标题中定义的，看起来像这样：

我发现只有一个选项可以真正满足我的需求：由 Chris Pederick 开发的“Web Developer”附加组件/扩展。

使用此插件，您可以非常轻松地禁用所有样式、默认样式、内联样式、嵌入样式，以及您猜对了的打印样式！

它目前可用于 Firefox 和 Chrome。我真的希望有一天会有一个 Safari 扩展，因为我主要使用 Safari。我为 Safari 找到的唯一选项是禁用所有样式 - 最新版本 (5.0.3) 浏览器默认提供的功能。这在开发过程中非常有用，可以查看您的网站将如何在纯文本浏览器上查看，但无法选择禁用的样式，它的实用性有限。

以下是在 Firefox 中使用上述扩展禁用打印样式的示例：

源打印样式表 - 权威指南

Answer 3

Firefox 的无插件解决方案：打开 Web 开发工具，在默认开发工具（齿轮图标）中勾选“截取整个页面的屏幕截图”。您只需执行此部分一次。

然后在开发人员工具中，单击相机图标。整个页面将保存为 .png。从这里您可以打印它，转换为 pdf 等。

Answer 4

我正在使用 Chrome 扩展程序：网页截图。通过两次点击，完整的网页将转换为 jpg 或 pdf。不再需要自己将屏幕截图粘在一起。此页面如下所示：