打印分页符 Javascript答案

【问题标题】：Print Page Break Javascript打印分页符 Javascript
【发布时间】：2020-12-29 22:25:47
【问题描述】：

我有一个通过 PHP 使用 Bootstrap 生成的工资单。我需要每 6 张工资单创建一个新页面。

这是我生成工资单的代码。

foreach($results as $result){
    foreach($result as $fetchall){
         if($counter % 6 == 0){
            $pgbreak = 'pgbreak';
         }
         else{
            $pgbreak = '';
         }

         $payslip .= '<div class="col-sm-4 '. $pgbreak .'">';
         $counter++;

         $payslip .= '<div class="payslip-title"></div>';
                         
         $payslip .= '</div>';
   }
}

这是我放置分页符的 CSS 代码：

@media print { div.pgbreak { page-break-after: always;} }

这是示例输出

Click here

【问题讨论】：

标签： javascript php css bootstrap-4

【解决方案1】：

对于分页，你可以看看：

page-break-before
page-break-inside
page-break-after

当我想将数据导出到.pdf 进行打印时，我通常使用html2pdf。
模板化并不容易，所有css 属性都不会被解释，但是当你完成后你就可以确定结果了。

编辑：

您需要每 4 个项目添加一个page-break-after: always;。

$payslip .= '<div class="col-sm-6">';

成为：

$payslip .= '<div class="col-sm-6 payslip-item">';

并添加以下 CSS：

.payslip-item:nth-child(4n) {
    page-break-after: always;
}

PS：我没有测试过这个

编辑 2：

我忘了，page-break-inside 被 break-inside 取代。
此外，经过几次测试，选定的元素需要有 display: block;（在 Chrome 中没有提到 display: inline-block）...

这是一个工作示例：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" />
    <style>
        .page {
            page-break-inside: avoid;
            page-break-after: always;
        }
    </style>
</head>

<body>
    <div class="container-fluid">
        <?php
        $closed = true;
        for ($i = 0; $i < 40; $i++) {
            if ($i % 6 == 0) {
                echo '<div class="row page">';
                $closed = false;
            }
        ?>
        <div class="col-sm-4 item">
            <h2>Lorem ipsum</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <?php
            if ($i % 6 == 5) {
                echo '</div>';
                $closed = true;
            }
        }
        if (!$closed) {
            echo '</div>';
        }
        ?>
    </div>
</body>

</html>

【讨论】：

问题是我不知道在我的 php 代码中将分页符放在哪里
你能显示完整的代码吗？我似乎无法让它工作
我不能，我正在工作中完成的网站上进行实时测试...我没有最小的代码来表示抱歉。
但是做一个最小的复制代码，我会更新它给你看。
告诉我代码的哪一部分需要放置分页符