时间戳

首页 > 解决方案 > 打印分页符 Javascript

javascript - 打印分页符 Javascript

问题描述

我有一个通过 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;} }

这是示例输出

点击这里

标签： javascriptphpcssbootstrap-4

解决方案

对于分页，您可以查看：

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

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

编辑 ：

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

$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;（不display: inline-block使用 Chrome）...

这是一个工作示例：

<!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>

推荐阅读