为什么这个单 A4 页面比例的 HTML 页面在 Chrome 或 Firefox 打印(而不是 Safari?)中跨越 2 页以上

问题描述 投票:0回答:1

我想了解导致从提供的 HTML 源代码生成的 PDF 跨越 2 页的条件以及如何防止这种情况发生。

目标

从正确的 A4 比例的 n 个 div ,我能够生成 n 页 的 PDF,而不会在任何其他页面上溢出。

重现问题的步骤

  1. 打开包含源代码的 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)。 CSS 定义的主 div 的宽度为 1240px,高度为 1753px。 2. 使用 Chrome 或 Firefox 打开它。 3. 按 CTRL+P 打开 PDF 打印预览,设置 A4、比例 100%(或默认)、无边距、打印背景 = true。 4. 预览跨越2页。

补充意见

css google-chrome firefox printing
1个回答
0
投票

打印到 PDF 有其自己的控件,因此如果您预先设置页面,您的页面应该可以正常工作。

<!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>
© www.soinside.com 2019 - 2024. All rights reserved.