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

【问题标题】：Get Print Page width/height using Javascript on Chrome在 Chrome 上使用 Javascript 获取打印页面宽度/高度
【发布时间】：2019-08-07 04:47:43
【问题描述】：

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

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

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

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

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

【问题讨论】：

请在此处查看javascript：stackoverflow.com/a/64884005/6188195

标签： javascript html css dom css-paged-media

【解决方案1】：

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

【讨论】：

是的，我的备份只是硬编码值，但 JS 获取可用是一个更好的解决方案，因为它可以在 A4 或 A3 或我将来使用的任何东西中工作（页面大小实际上是传递给本页）

【解决方案2】：

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

【讨论】：