Question

我正在使用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>

我的摘要/剃刀页面如下：

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

@edit：

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>

这是迭代“代码段/剃刀”的页面

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

Answer 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

DOMPDF是用于复杂报告的正确工具吗？

1 个答案: