自动设置 pdf 页面高度后页面大小不起作用

Page size doesn't work after auto setting pdf page height

我正在从 html 生成宽度为 79mm 的 pdf，它不起作用 width:79mm

 <style type="text/css" media="print">
        @page {
            width: 79mm;
            page-break-inside: avoid;
        }
    </style>

并且我使用的是尺寸，所以必须修复高度然后在动态值更大时分页符尺寸：79mm 250mm;

<style type="text/css" media="print">
        @page {
            size: 79mm 250mm;
                page-break-inside: avoid;
        }
    </style>

我想你可能误解了 "page-break-inside" CSS 属性 的用法。根据 this tutorial, the usage of "page-break-inside" is for some tags inside your HTML file. For example here I added the code of a simple "HTML" and "CSS" and used your style in that for p tags (not inside @page rule because according to this tutorial 你 不能 使用 @page 更改所有 CSS 属性：

#page {
    background-color: rgb(226, 229, 238);
    color: #01C247;
    border-bottom: 1px solid #000;
}

strong {
    color: red;
}

p {
    border-bottom: 2px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my site</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css" media="print">
        @page {
            size: 79mm 250mm;
        } 

        
        p {
            page-break-inside : avoid;
        }
        
    </style>

</head>
<body>

    <div id="page">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
        
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
    </div>

    <div id="page">
        <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
        <p>
            <strong>para end</strong> sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            hamid davodi sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
    </div>

    <div id="page">
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
    </div>

    <div id="page">
        <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
    </p>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>

        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis quas, tempora, nihil odit, mollitia harum illo cum placeat unde animi voluptatum dolorem quod. Aspernatur nihil repellendus optio dignissimos officia quidem!
        </p>
    </div>
    
</body>
</html>

如果您尝试在浏览器中打印上述代码（使用 ctrl+p），您会注意到段落（使用 red border-bottom 清除）是不在页面之间打印，我的意思是 单个 段落的所有文本都在一页中并且 not 一些文本在一页中，其余文本在下一页。你可以评论

p {
   page-break-inside : avoid;
}

部分以查看打印时的差异。因此，为了解决您的问题，我认为您可以将“page-break-inside”应用于包含您网站的 付款详细信息 部分的标签。

我已经通过在页面大小中定义宽度和高度解决了这个问题

@page {
        size: 79mm 270mm;
    }