2014-11-28 12:39:53 +0000 2014-11-28 12:39:53 +0000
73
73

如何在网页浏览器中获得所见即所得(打印所见)?

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

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

有没有一种方法可以得到我想要的东西(除了截图,费尽心思地将它们剪贴在一起,然后打印出结果的图像)?有没有办法告诉我使用的网络浏览器(Firefox、Chrome、Safari、IE或Opera)。"按照你在一个任意高的浏览器窗口上渲染的方式打印这个页面"?

(PS:另见: 使用屏幕CSS从浏览器打印?)

答案 (8)

42
42
42
2017-11-26 06:13:40 +0000

Chrome 浏览器的开发者工具中内置了这个功能,但在一个非常不明显的位置。

  • 打开 Developer Tools (Windows: F12 或 Ctrl+Shift+I, Mac: Cmd+Opt+I)
  • 点击 Customize and control DevTools 汉堡菜单按钮,并选择 More tools > Rendering settings (或 Rendering in newer versions)。
  • 勾选 “渲染 "选项卡上的 "模拟打印介质 "复选框并选择 "屏幕 "介质类型。

_主要是从这个 答案 引用的。

现在当你打印的时候,打印出来的东西会和你看到的一模一样。确保在打印之前保持开发者工具的打开状态。一旦您关闭开发工具,渲染设置将被重置为正常。

注:本答案的灵感来自 https://superuser.com/a/568847/176146 。但这个答案的实际文本来自 lmeurs answer 。这几乎是完全一样的,但我们试图做的是与他们的答案完全相反的事情,所以没有将覆盖设置为Print,而是设置为Screen

23
23
23
2014-11-28 12:59:05 +0000

为什么我的网页没有打印出我在浏览器中看到的东西?

您的一些网页打印方式不同的原因是他们有一个打印样式表


什么是打印样式表?

打印样式表是将网页格式化,这样当打印时,它就会自动以用户友好的格式打印。打印样式表已经存在了很多年,也被写过很多文章。然而,很少有网站使用它们,这意味着我们留下的网页不能正确地打印到纸上,令人沮丧。

很明显,很少有网站使用打印样式表。

  • 打印样式表极大地提高了可用性,特别是对于有大量内容的页面(比如这个!)
  • 它们的设置非常快速和简单

一些网站提供了一个链接到打印友好版本的页面,但这当然需要设置和维护。这也需要用户在屏幕上注意到这个链接,然后在他们打印页面的常规方式(例如选择屏幕顶部的打印按钮)之前使用它。不过,当同时打印多个网页时,比如一篇文章跨越到多个网页时,打印友好型版本是很有用的。

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

  • *

如何禁用打印样式表?

我最近需要得到一个网站的快照,就像它在屏幕上显示的那样。也就是说,我想要背景色,我想要广告,我想要完整的布局。

一种方法是在你向下滚动页面时连续截图,然后在Photoshop中把它们拼接起来。这很耗时,而且会让你得到一个低分辨率(72dpi)的图像。

另一种方法是打印页面,然后 “保存为 "PDF而不是实际打印。这对于那些没有定义打印页面和查看页面的不同布局的页面来说,效果相当好。

不幸的是,对我来说,在网站上包含一个 "打印 "样式表变得越来越流行,当用户试图打印网站时,它定义了新的页面样式。这是在头中定义的,看起来像这样。

我发现只有一个选项能真正满足我的需求。(http://chrispederick.com/work/web-developer/)

有了这个插件,你可以很容易地禁用所有的样式,默认样式,内联样式,内嵌样式,还有,你猜对了,打印样式!

它目前适用于Firefox和Chrome。我真的希望有一天Safari的扩展会出现,因为我主要使用Safari。我发现Safari的唯一选项是禁用所有样式–这是浏览器最新版本(5.0.3)的默认功能。在开发过程中,这个功能很有用,可以看到你的网站在纯文本浏览器上是如何被浏览的,但如果不能选择你要禁用的样式,它的作用就很有限。

下面是在Firefox中使用上述扩展禁用打印样式的例子。

来源 打印样式表–权威指南

9
9
9
2017-05-09 13:01:26 +0000

火狐浏览器的无插件解决方案。打开Web开发者工具,在默认开发者工具(齿轮图标)中勾选 “对整个页面进行截图"。这一部分你只需要做一次。

然后在开发者工具中,点击相机图标。整个页面将被保存为一个.png。从这里你可以打印它,转换为pdf等。

8
8
8
2014-12-02 07:29:40 +0000

我使用的是Chrome扩展。网页截图。只要点击两下,完整的网页就会被转换为jpg或pdf。再也不用自己把截图粘在一起了。这个页面看起来像这样。

3
3
3
2016-10-12 11:47:35 +0000

我也面临类似的问题。目前我正在使用Print Friendly and PDF Extenstion for Chrome

最大的特点是我可以手动删除打印/PDF中不需要的项目。

1
1
1
2016-10-27 18:42:56 +0000

(冒着把这变成一套 软件推荐 答案的风险,但到目前为止,安装并使用浏览器扩展X似乎是唯一一种真正有效的答案:)

最近我一直在使用【打开屏幕截图】(https://www.openscreenshot.com/) Chrome扩展来达到这个目的,我对它非常满意。它对 长长的 Quora 页面 没有任何问题。

更新(2017年11月):这不再是最佳选择。火狐浏览器和Chrome浏览器现在支持在其开发工具中进行全页面截图。

1
1
1
2019-03-14 12:26:08 +0000

今天,在火狐浏览器中可以这样做(我现在用的是65.0.2),具体操作如下。

1、按F12。开发者工具窗格将显示出来。 2. 在右上角附近,有一个相机图标。要对整个页面进行截图,点击它。

Settings中(要访问它们,请点击相机图标右边的三个点),你可以稍微自定义它的行为;默认情况下,它会将截图保存到你的Firefox下载文件夹。

如果没有摄像头图标,你首先需要在设置中启用它。

如果没有摄像头图标,首先需要在设置中启用它。

1
1
1
2017-06-22 16:06:45 +0000

这里还有一个叫 OpenScreenShoot 的。我很喜欢它,因为它是开源的,可以在GitHub上找到,而且它在一个很长的网页上为我工作,其他的替代方案如 WebpageScreenShot 都失败了。