25

是否可以将具有真正绝对定位元素的 HTML 页面打印到纸上？似乎所有浏览器都在这里搞得一团糟。很容易用绝对单位（例如厘米）定义一个物体，并position: absolute在里面放置元素。然而，每个浏览器似乎都试图让打印这样的页面成为不可能。例如，FF 正在添加打印边距，即使在 linux 上打印到 PDF，尽管页面设置为 0。Chrome 似乎在每种情况下都会缩小页面。那么如何打印具有绝对定位的东西，例如。纸质表单域、标记等？我忽略了什么吗？

4

7 回答 7

29

可悲的是，CSS3 模块：分页媒体允许这一切发生。这是关于太大页面的规则：

3.3.3. 渲染不适合页面表的页面框

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

  • 在较大的页面上以指示的大小呈现页面框。
  • 如果这将使页面框适合页面表，则将页面框旋转 90°。
  • 缩放页面框以适合页面表。（缩放时不需要保持页面或页面上任何元素的纵横比；但是，最好保留纵横比。）[由 Chrome 完成]
  • 重新格式化页面内容，包括“溢出”到其他页面。[由许多其他或更旧的浏览器完成]
  • 剪辑溢出的内容（最不喜欢）。

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

3.3.4。将页面框定位在工作表上

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

这是打破你所有positioned 东西的规则：

3.7. 页框外的内容

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

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

  • 用户代理应该避免生成大量的空白页框来尊重元素的定位（例如，您不想打印 100 个空白页）。但是请注意，可能需要生成少量的空页面框来尊重 'page-break-before' 和 'page-break-after' 的 'left' 和 'right' 值。
  • 作者不应该为了避免渲染它们而将元素放置在不方便的位置。反而：
    • 要完全抑制框生成，请将“显示”属性设置为“无”。
    • 要使框不可见，请设置“可见性”属性。
  • 用户代理可以以多种方式处理位于页面框之外的框，包括丢弃它们或在文档末尾为它们创建页面框。

看看第 3.7 节的第二段：这些元素的确切格式的规范超出了本文档的范围。由于没有其他文档，也没有其他指南，因此本段遵循的一般原则，每个浏览器都可以为所欲为。

这是目前在这个 CSS3 模块中的缺陷之一。然而，我认为这些缺陷不能通过 CSS4 或修改后的 CSS3 模块来消除，因为可能的样式表和生成的布局的多样性太大而无法涵盖。还要注意CSS Print Profile 中给出的一个小脚注：

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

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

也可以看看：

补充说明

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

于 2012-07-31T16:37:54.147 回答
6

正如您所说，网络浏览器在打印时往往会做一些疯狂的事情。面向打印的引擎通常更好。

WeasyPrint是一个开源引擎，可以渲染为 PDF 并支持绝对定位以及CSS 3 Paged Media来设置页边距：

@page { margin: 1cm /* or 0, if you want */ }
于 2012-07-27T12:43:16.043 回答
4

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

#maindivname{position:relative;}

应该做的伎俩。

于 2012-06-05T20:51:22.770 回答
3

我已经测试了打印“位置：绝对”元素的浏览器状态，结果如下：

  • IE 11：失败。不管什么操作系统，7、8、8.1。
  • IE 10：通过。但是，您无法在 8.1 上恢复到 10，因此使用它的人会被卡住。
  • Firefox 高达 38.05 = 失败。未知是否有任何版本有效。

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

  • 铬：通过
  • 歌剧：通过
于 2015-06-05T19:36:20.817 回答
2

媒体查询可以解决问题 - 检查此链接和上一个问题，也许它会有所帮助。 调试打印样式表的建议？

媒体查询将 px 转换为英寸/厘米/打印要求所需的任何值。

您提到的边框/边距可能是您的打印机的可打印区域（握把边缘）。大多数打印机需要某种类型的边缘来抓取和进纸。这就是为什么当一个人打印全出血文档（墨水到最边缘）时，它会打印在比所需更大的库存上，然后被裁减。

于 2012-07-31T20:41:37.520 回答
1

使用页面设置设置页边距是打印HTML页面或DIV.

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

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

position:relative;
media:print;

希望它会有所帮助。

于 2012-07-26T13:00:13.433 回答
0

在 CSS 中使用这个属性：

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

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

于 2021-07-20T13:20:13.603 回答