Question

是否可以打印带有真正绝对定位元素的HTML页面？似乎所有浏览器都在这里搞得一团糟。很容易通过绝对单位（例如，cm）定义一个主体，并在position: absolute内放置元素。但是，每个浏览器似乎都试图打印这样的页面。 FF例如是添加打印页边距，即使在linux上打印到PDF时，尽管有0页边距页面设置。在每种情况下，Chrome似乎都会缩小页面。那么如何打印具有绝对定位的东西，例如。纸张形式字段，标记等？我忽略了什么吗？

Answer 1

可悲的是，CSS3 Module: Paged Media允许所有这一切发生。这是关于页面太大的规则：

3.3.3. Rendering page boxes that do not fit a page sheet

如果页面框与目标页面尺寸不匹配，则用户代理可以选择（按优先顺序）：


在较大的页面上以指定的大小渲染页面框。

将页面框旋转90°，如果这样可使页面框适合页面。

缩放页面框以适合页面。（缩放时无需保持页面或页面上任何元素的宽高比;但是，首选保留宽高比。）[由Chrome完成]

重新格式化页面内容，包括“溢出”到其他页面。 [由许多其他或较旧的浏览器完成]

剪辑溢出内容（最不喜欢）。


用户代理应该在执行这些操作之前咨询用户。

3.3.4. Positioning the page box on the sheet

当页面框小于页面大小时，用户代理应该将页面框放在工作表中心，因为这会对齐双面页面并避免意外丢失在纸张边缘附近打印的信息。

这是违反所有position内容的规则：

3.7。 Content outside the page box

[...]此外，当盒子绝对定位时，它们可能会结束   在“不方便”的位置。例如，图像可以放在   页面框的边缘。同样，当盒子使用固定或相对时   定位，它们也可能最终在页面框之外。

这些元素的确切格式的规范在外面   本文档的范围。但是，我们建议作者和   用户代理遵守以下一般原则   页面框外的内容：


用户代理应避免生成大量空白页面框以支持元素的定位（例如，您不希望   打印100张空白页）。但请注意，生成一个小数字   为了纪念“左”和“右”，可能需要空页框   'page-break-before'和'page-break-after'的值。

作者不应该将元素放置在不方便的位置，以避免渲染它们。代替：

要完全禁止生成框，请将“display”属性设置为“none”。

要使框不可见，请设置'visibility'属性。



用户代理可以通过多种方式处理位于页面框外部的框，包括丢弃它们或为其创建页面框   他们在文件的最后。

看一下第3.7节的第二段：这些元素的确切格式的规范不在本文档的范围内。由于没有其他文档而没有其他指南，所以本段后面的一般原则，每个浏览器都可以做任何想做的事。

这是CSS3模块中目前存在的缺陷之一。但是，我认为CSS4或修改后的CSS3模块无法删除这些缺陷，因为各种可能的样式表和结果布局太大了。还要注意一点footnote given in CSS Print Profile：

‡打印机可以忽略在正常流程中当前元素的位置之前放置在页面上的定位元素。

所以基本上不可能在每个浏览器中创建相同的效果。目前，实现便携式文档的唯一可能方法是使用第三方应用程序或PDF打印机以及您最喜欢的浏览器创建PDF。只要W3C的建议不严格或者浏览器供应商实现他们想要的任何东西，其他方式都必然会失败。

另见：

CSS3 Module: Paged Media（工作草案，2006年最新修订版）
CSS Print Profile（工作草案，2006年最新修订版）

附加说明

如果你有一堆需要打印的position:absolute元素，有时候一个元素是否真的需要定位绝对，或者是否可以稍微不同或更简单的方式实现相同的效果。另请注意，您应该对打印媒体并非真正需要的每个元素使用display:none，例如广告，导航等......

Answer 2

我已经测试了浏览器的浏览状态＆＃34; position：absolute＆＃34;具有以下结果的元素：

IE 11：失败。什么操作系统都不重要，7,8,8.1。
IE 10：通过。但是，你不能在8.1上恢复为10，所以那些人都会被卡住。
Firefox最高38.05 =失败。如果任何版本有效，则不知道。

好消息是看起来像Blink / WebKit的人做了他们的功课而不是使用糟糕的代码。

Chrome：传递
Opera：传递

Answer 3

让你的容器具有相对位置。这是在每个屏幕和纸张上将绝对定位元素保持在同一位置的唯一方法。因此，如果您的主要div（所有内容所在的div）将以下内容添加到您的css中：

#maindivname{position:relative;}

应该做的伎俩。

Answer 4

媒体查询将起作用 - 检查此链接和上一个问题，也许它会有所帮助。 Suggestions for debugging print stylesheets?

Media Query将px转换为英寸/ cm /打印要求所需的任何内容。

您提到的边框/边距可能是打印机的可打印区域（抓握边缘）。大多数打印机需要某种类型的边缘来抓取和供给库存。这就是为什么当一个人打印出一个完全放气的文件（墨水到最边缘）时，它会打印在比需要的更大的库存上，然后进行修剪。

Answer 5

使用页面设置设置边距是打印HTML页面或DIV的第一个主要解决方案。

毕竟不会出现预期的结果，那么您需要在HTML页面上进行一些挖掘。

使用java脚本创建一个没有标题栏或任何自定义栏的窗口。并将所有原始数据放入带有position:relative的窗口中，并将媒体类型设置为打印。

position:relative;
media:print;

希望它会有所帮助。

Answer 6

在 CSS 中使用此属性：

body{
  -webkit-print-color-adjust:exact;
}

这有助于在表格中定位绝对值和背景。

具有绝对位置的HTML打印

6 个答案:

附加说明