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

vshtjzan  于 11个月前  发布在  Go
关注(0)|答案(1)|浏览(151)

我想了解的条件,导致生成的PDF从提供的HTML源代码跨越2页,以及如何做,以防止这一点。
目标
n格的正确A4比例,我能够生成一个PDF的n页没有溢出的任何额外的页面。

重现问题的步骤

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的宽度为1240 px,高度为1753 px。x1c 0d1x 2.使用Chrome或Firefox打开它。3.按Ctrl+P打开PDF打印预览,设置为A4,缩放比例为100%。(或预设值),无边界,打印背景= true。4.预览跨越2页。

其他注解

q5lcpyga

q5lcpyga1#

打印到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使用不同的系统!!

x 1c 3d 1x

相关问题