在Chrome上使用Javascript获取打印页面的宽度/高度

Question

我想打印HTML页面并获得对打印布局的更多控制，所以我首先将@page设置为特定大小（在我的情况下为A4纵向），现在我需要检查是否有一些动态内容我可以放入该页面，还是必须在几个地方手动拆分。

我遇到的主要问题是如何获取打印页面的高度/宽度尺寸。

我尝试设置宽度和高度为100％的div并获取其高度，但结果却是错误的。为了方便测试，您可以使用以下命令：https://playground.jsreport.net/w/anon/KpNomfIu（这是一个可以打印为PDF的库，基本上只使用chrome打印并显示pdf）。

无论使用A3，A4还是A1，我的身高总是600像素，显然这是错误的。

这仅需要在Chrome上运行。 （我知道这很奇怪，但我需要使用CSS3 Paged Media和所有相关内容无法实现的布局）

Answer 1

A4页面尺寸定义为210mm x 297mm，即8.268“ x 11.69”。由于CSS像素为96像素/英寸（只要我们在谈论像打印机这样的高分辨率设备-CSS像素等于低分辨率应用程序的设备像素），我认为您应该能够依靠页面大小为793.7px x 1123px，减去您要提供的任何边距，而无需通过代码提取这些值。

Answer 2

可以对要拆分的DOM元素进行分页，例如@media print{img{page-break-after: always}}，请确保该元素必须是非内联或内联块的block元素