2

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

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

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

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

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

4

2 回答 2

1

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

于 2018-08-16T01:09:11.987 回答
0

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

于 2018-10-26T02:14:42.003 回答