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

【问题标题】：Page size doesn't work after auto setting pdf page height自动设置pdf页面高度后页面大小不起作用
【发布时间】：2021-11-14 16:56:37
【问题描述】：

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

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

我使用的是大小，所以当动态值更大时，必须先修复高度然后分页符size: 79mm 250mm;

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

【问题讨论】：

标签： javascript html css pdf-generation

【解决方案1】：

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

@page {
        size: 79mm 270mm;
    }

【讨论】：

【解决方案2】：

我想你可能误解了 "page-break-inside" CSS 属性的用法。根据this tutorial，"page-break-inside" 的使用是针对 HTML 文件中的一些标签。例如在这里我添加了一个简单的“HTML”和“CSS”的代码，并在p标签中使用了你的样式（不在@page规则内，因为根据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），您会注意到页面之间没有打印段落（使用redborder-bottom清除），我的意思是单个段落的所有文本都在一个页面中，不是部分文本在一个页面中，其余文本在下一页中。你可以评论

p {
   page-break-inside : avoid;
}

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

【讨论】：

我有一个简单的要求，如何自动调整页面大小的高度。
“自动调整”是什么意思？您必须为高度定义一个数字！如果您的内容布局不正确，您必须更改布局，这是网页设计师的责任。一种方法是使用 CSS 属性，例如 page-break-inside。如果还不够，你必须在 print 状态下定义其他样式来解决你的问题。
感谢您的建议，我通过在页面大小中定义宽度和高度解决了这个问题