如何在网络浏览器中获得“所见即所得”（打印所见内容）？

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

但是，这根本不是许多网站上发生的事情。他们可能会打印出完全不同的内容。我从未要求浏览器执行此操作，并且我不希望发生这种情况。

有什么方法可以得到我想要的（除了截取屏幕截图，刻苦地将它们粘贴和粘贴以及打印结果图像之外）？有没有办法告诉我使用的Web浏览器（Firefox，Chrome，Safari，IE或Opera）：“打印此页面，就像在任意高的浏览器窗口上呈现它一样”？

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

Chrome在开发人员工具中内置了此功能，但位置并不明显。

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

大部分引用来自此答案。区别见下文。

现在，当您打印时，打印输出将完全与您看到的一样。确保在打印之前保持开发人员工具为打开状态。关闭开发人员工具后，“渲染”设置将重置为正常状态。

注意：此答案的灵感来自https://superuser.com/a/568847/176146。但是，该答案的实际文本来自lmeurs的答案。几乎完全一样，但是我们试图做与他们的答案完全相反的事情，因此不是将替代设置为Print而是将其设置为Screen。

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

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

什么是打印样式表？

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

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

• 打印样式表极大地提高了可用性，特别是对于内容很多的页面（例如本页面！）
• 它们非常快捷且易于设置

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

打印网站时，源禁用打印样式表（CSS）

如何禁用打印样式表？

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

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

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

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

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

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

当前可用于Firefox和Chrome。我真的希望有一天Safari扩展会出现，因为我主要使用Safari。我为Safari找到的唯一选项是禁用所有样式-默认情况下，浏览器的最新版本（5.0.3）附带此功能。这在开发过程中很有用，以查看如何在纯文本浏览器上查看您的网站，但无法选择要禁用的样式，因此实用程序有限。

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

源打印样式表-权威指南

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

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

我正在使用Chrome扩展程序：网页屏幕截图。只需单击两次，即可将完整的网页转换为jpg或pdf。无需将屏幕截图自己粘在一起。该页面如下所示：

我也面临着类似的问题。目前，我正在使用 适用于Chrome的友好打印和PDF扩展。

最好的功能是我可以手动删除不需要的打印/ PDF中的项目。

这是另一个名为OpenScreenShoot的对象。我喜欢它，因为它是开放源代码，可在GitHub上获得，它对我来说适用于一个很长的网页，在该网页上其他类似WebpageScreenShot的选择都失败了。

（冒着将其转变为一组“ 软件建议”答案的风险，但是到目前为止，安装和使用浏览器扩展X似乎是唯一可行的答案：）

最近，我一直在为此使用Open Screenshot Chrome扩展程序，对此我感到非常满意。较长的Quora页面没有问题。

更新（2017年11月）：这不再是最佳选择：Firefox和Chrome现在支持在其开发人员工具中获取全页屏幕截图。

今天，可以在Firefox中完成此操作（我现在正在使用65.0.2），如下所示：

1. 按F12。将显示“开发人员工具”窗格。
2. 在右上角附近，有一个相机图标。要截取整个页面的屏幕快照，请单击它。

在“设置”中（要访问它们，请单击相机图标右侧的三个点），可以略微自定义其行为。默认情况下，它将截图保存到Firefox下载文件夹。

如果缺少相机图标，则首先需要在“设置”中启用它。