DOMPDF 是复杂报告的正确工具吗？答案

【问题标题】：Is DOMPDF the right tool for complex Reports?DOMPDF 是复杂报告的正确工具吗？
【发布时间】：2019-10-28 19:14:24
【问题描述】：

我正在使用 barryvdh/laravel-dompdf 从 Laravel/Jquery 应用程序创建报告，该报告非常复杂 - 在起始页之后有几页根据报告数据重复。每个页面都有一个页眉和一个页脚，我想问是否可以以某种方式限制主要内容，使其不会像这样

与页脚或页眉重叠

我也尝试过插入页码，但没有成功。这就是我的主报告页面的外观

<body>


    <table width="100%">
        <tr>
             <td>
                <img src="assets/images/track-more.png" width="200px" height="auto">
              </td>
            <td>
                <img class="logofixed" src="assets/images/frauscher1.png" width="200px" height="auto">
            </td>
        </tr>
    </table>


<h1 class="center">report</h1>


</table>
<div class="page-break"></div>

@foreach ($measures as $measure)
    @include("snippets/razor")
    <div class="page-break"></div>
@endforeach

    <footer>
        <hr>
        <script type="text/php">
    if (isset($pdf)) {
       $font = $fontMetrics->getFont("Arial", "bold");
       $pdf->page_text(555, 745, "Page {PAGE_NUM}/{PAGE_COUNT}", $font,    7, array(0, 0, 0));
    }

    </script>

    </footer>
</body>

我的 sn-ps/razor 页面是这样的：

 <div class="row">

    <table>
        <tr>
            @if ($measure->pass == 1)
                <td class="ok"><h1>{{$measure->text}}</h1></td><td></td>
            @else
                <td class="fail"><h1>{{$measure->text}}</h1></td><td></td>
            @endif
        </tr>
    </table>
    <table>

        <tr>
            <td>date1:</td><td>{{$measure->date1}}</td>
        </tr>
        <tr>
            <td>date2:</td><td>{{!empty($measure->date2)?$measure->date2:""}}</td>
        </tr>
        <tr>
            <td>date3:</td><td>{{$measure->date3}}</td>
        </tr>
        <tr>
            <td>date4:</td><td></td>
        </tr>

    </table>
@if(!empty($measure->items))
    <table class="measure">
        <tr>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
            <th>headerx</th>
        </tr>
        @foreach ($measure->items as $i => $item)
            @php  $class = $i % 2 === 0 ? 'even' : 'odd'; @endphp
            <tr class="{{ $class }}" >
                <td>{{ $item->text }}</td>
                <td>{{ $item->data1}}</td>
                <td>{{ $item->data2}}</td>
                <td>{{ $item->data3}}</td>
                <td>{{ $item->data4}}</td>
                <td>{{ $item->data5}}</td>
                @if ($item->data1== 1)
                    <td class="ok">Success</td>
                @else
                    <td class="fail">Failure</td>
                @endif


                <td>{{ $item->data6}}</td>
            </tr>
        @endforeach
    </table>
   @endif
</div>

@编辑：

this happens when i used "fixed" header and footer

这是我当前的 css

  body {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 14px;
    }

    table.measure, table.measure > tr, table.measure td, table.measure th {
        width: 100%;
        border: 1px solid black;
        padding: 5px;
        border-collapse: collapse;
    }

    .page-break {
        page-break-after: always;
    }

    .center {
        text-align: center
    }


    .logofixed {
        position: fixed;
        right: 0;
    }

    .logofixedleft {
        position: fixed;
        left: 0;
    }



    .bestanden {
        color: white;
        background-color: #95B711;
    }

    .fehler {
        color: white;
        background-color: #e2001a;
    }

    .even {
        background: #FFFFFF;
    }

    .odd {
        background: #a3adb2;
    }

/*   @page {
        margin-top: 2cm;
        margin-bottom: 2cm;
    }*/


    head {
        position: fixed;
        top: 1cm;
    }


    footer {
        position: fixed;
        bottom: 0cm;
    }

    hr {
        border: none;
        height: 1px;
        /* Set the hr color */
        background-color: black; /* Modern Browsers */
    }

    table { overflow: visible !important; }
    thead { display: table-header-group }
    tfoot { display: table-row-group }
    tr { page-break-inside: avoid }

主页：

<body>
<head >
    <img class="logofixedleft" src="assets/images/dummy.png" width="200px" height="auto">
    <img class="logofixed" src="assets/images/dummy.png" width="200px" height="auto">

    <hr >
</head>


@foreach ($measures as $measure)
    <div class="page-break"></div>
    @include("snippets/razor")

@endforeach

<footer>
    <hr>
    {{--<div class="pagenum-container">Seite <span class="pagenum"></span></div>--}}
    <script type="text/php">
               $font = $fontMetrics->getFont("Arial", "bold");
               $pdf->page_text(45, 765, "Page {PAGE_NUM}/{PAGE_COUNT}", $font, 8, array(0, 0, 0));

      </script>
</footer>

</body>

这是迭代“sn-ps/razor”的页面

<div class="row" style="margin-top:1cm">

    <table>
        <tr>
            @if ($measure->pass == 1)
                <td class="ok"><h1>{{$measure->text}}</h1></td><td></td>
            @else
                <td class="fail"><h1>{{$measure->text}}</h1></td><td></td>
            @endif
        </tr>
    </table>

@if(!empty($measure->items))
    <table class="measure" width="100%" >
        <thead>

        <tr>
            <th>column</th>
            <th>column</th>
            <th>column</th>
            <th>column
                </th>
            <th>column</th>
            <th>column</th>
            <th>column</th>
            <th>column</th>
        </tr>
        </thead>
        @foreach ($measure->items as $i => $item)
            @php  $class = $i % 2 === 0 ? 'even' : 'odd'; @endphp
            <tr class="{{ $class }}" >
...
            </tr>
        @endforeach
    </table>

   @endif
</div>

【问题讨论】：

This 或 this 可能会对您有所帮助。
谢谢@Remul - 我会看看这个并试一试！
即使每个部分的内容分布在多个页面上，是否也是一种在每个页面上显示标题的简单方法？表格根据页面设置分页，但我可以以某种方式控制这个分页符，还是只为页面内的每个细分制作一个标题？
如果您使用position: fixed; 作为标题，它应该出现在每个页面上，请参阅here 和here。对于分页符，您可以使用以下内容：<div style="page-break-after: always;"></div> 请参阅here。
如here 所述，您应该使用@page { margin: 100px 25px; } 提供页边距，然后将页脚/页眉放置在具有负顶部/底部值的边距内。

标签： laravel-5 dompdf

【解决方案1】：

每页的页眉/页脚

为了在每个页面上显示页眉/页脚，您需要使用固定定位的元素，给页面一些边距，使元素不会重叠，然后将页眉/页脚移动到边距内，顶部/底部为负价值观。

类似这样的：

<html>
<head>
  <style>
    @page { margin: 100px 25px; }
    header { position: fixed; top: -60px; left: 0px; right: 0px; height: 50px; }
    footer { position: fixed; bottom: -60px; left: 0px; right: 0px; height: 50px; }
  </style>
</head>
<body>
  <header>header on each page</header>
  <footer>footer on each page</footer>
</body>
</html>

分页符

您可以使用以下内容创建手动分页符：

<style>
.page-break {
    page-break-after: always;
}
</style>
<div class="page-break"></div>

来源：

page breaks

header / footer on every page

【讨论】：