提问人：redvivi 提问时间：11/13/2023 更新时间：11/14/2023 访问量：31
为什么这个具有单个 A4 页面比例的 HTML 页面在 Chrome 或 Firefox Print（不是 Safari）中跨越 2 个页面？
Why does this HTML page with single A4 page ratio spans over 2 pages in Chrome or Firefox Print (not Safari?)
问：
我想了解导致从提供的 HTML 源代码生成 PDF 的条件，跨越 2 页，以及如何防止这种情况发生。
目标
从正确 A4 比例的 n div 中，我能够生成 n 页的 PDF，而不会在任何其他页面上溢出。
重现问题的步骤
- 打开包含源代码的 HTML 页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Div</title>
<style>
.red-div {
width: 1240px;
height: 1753px;
background-color: red;
}
</style>
</head>
<body>
<div class="red-div"></div>
</body>
</html>
根据标准页面比例规范，此 HTML 页面的宽/高比为 1/sqrt（2）。主 div 的宽度为 1240px，高度为 1753px，由 CSS 定义。
2. 使用 Chrome 或 Firefox 打开它。
3. 按 CTRL+P 打开 PDF 打印预览，设置 A4，缩放比例 100%（或默认），无边距，打印背景 = true。
4. 预览跨越 2 页。
其他意见
- 将比例缩小到 96% 适合 HTML 页面是一页。
- Safari 上不会出现此问题。
- 我在 https://bugs.chromium.org/p/chromium/issues/detail?id=1499618 上提出了这个问题，如果没有解释为什么会发生这种情况，它最终无法解决。
答：
1赞
K J
11/14/2023
#1
“打印到 PDF”有自己的控件，因此，如果您预设了页面，您的页面应该可以正常工作。Chrome /Edge“另存为”或“打印到MS打印机”应该没有区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Red Div</title>
<style>
@media print { @page { margin: 0; size: 1240px 1753px ; } body { margin: 0; } }
.red-div {
width: 1240px;
height: 1753px;
background-color: red;
}
</style>
</head>
<body>
<div class="red-div"></div>
</body>
</html>
但是，Firefox使用不同的系统！
评论
0赞
redvivi
11/14/2023
感谢 @K J 的输入！但是假设我有几个 div，每个 div 都是宽度：1240px;高度：1753px;。此打印控件如何处理多个页面（一个 div = 一页）？
评论
.redwidth:210mm; height:297mm;red-div{transform: scale(0.96);}