DOMPDF 是处理复杂报告的正确工具吗?
Is DOMPDF the right tool for complex Reports?
我正在使用 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>
我的snippets/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>
这是迭代的页面"snippets/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>
每页页眉/页脚
为了在每个页面上显示页眉/页脚,您需要使用固定定位的元素,给页面一些边距,这样元素就不会重叠,然后将页眉/页脚移动到页边距内,顶部为负数/ 底值。
像这样:
<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>
来源:
我正在使用 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>
我的snippets/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>
这是迭代的页面"snippets/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>
每页页眉/页脚
为了在每个页面上显示页眉/页脚,您需要使用固定定位的元素,给页面一些边距,这样元素就不会重叠,然后将页眉/页脚移动到页边距内,顶部为负数/ 底值。
像这样:
<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>
来源: