在打印网页时,如何使用CSS指定物理尺寸(例如2英寸)?

10

有没有一种可靠的方式在CSS中指定物理尺寸,以便在打印页面时,我的元素以特定的大小和位置出现在打印页面上?

我看到CSS有英寸和厘米的单位,但是当我执行以下操作时,Firefox和Chrome实际上并没有按2x2英寸打印盒子(这并不令人惊讶):

.test {
    width: 2in;
    height: 2in;
    border: solid 1px #aaa;
}

我是否过于乐观,希望有一种方法可以指定大小,并使浏览器根据打印机分辨率调整其打印大小?

谢谢。


输出偏差有多少?物理单位应该按照您的期望正常工作。虽然它似乎主要用于边距。 - raam86
1
打印HTML和CSS的最佳方式是使用PDF。有几个不错的库可供选择,包括PHP的TCPDF - Jared Farrish
感谢您的回复。我忘记删除对另一个样式表的引用,这可能是额外填充的原因。现在在Firefox中完美无瑕,在Chrome中大约多了1/2厘米(但现在这样也可以)。 Jared - 我认为你可能是对的,PDF似乎更安全 - 我会尝试一下。有人知道任何好的(最好是免费的).NET库吗?谢谢 - Matt Wilson
2个回答

6
尝试添加margin: 0; padding: 0以避免任何额外的间距。

谢谢Dmitry - 现在我感到有点傻了 - 我忘记删除其中一个样式表的引用,所以肯定是有某个地方添加了padding。没有其他样式,并且将margin和padding设置为0,在Firefox中确实得到了2英寸。 - Matt Wilson
1
填充当然会影响尺寸(以及边距和边框,具体取决于您如何测量它们),但即使它们被消除,实际精度仍因浏览器和打印机而异 - 小偏差很常见。 - Jukka K. Korpela

6
根据CSS3值和单位模块第三级,第5.2条款绝对长度,在“打印媒体和类似的高分辨率设备”上,cm单位应与物理厘米匹配,而在低分辨率设备上,像素应是锚定单位,这通常意味着cm与物理单位不同。实际情况更糟。我刚刚测试了一个宽度设置为15cm的元素。在屏幕上(包括打印预览),它实际上是15.8cm,在物理打印机上打印时,它是14.7cm(因此基本上更接近,但仍然远非精确)。

打印机在其PPD文件中定义了可打印区域,因为打印机通常无法完全打印到纸张边缘。打印系统可能会检查您的内容是否完全位于该框内或将其缩放以使其位于其中。在Mac上,这显示为比100%低的比例,但您可以手动输入100%并避免此问题。 - Erik Martino

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接