mPDF - 基于元素高度的分页符
mPDF - Page break based on element height
我正在使用 mpdf in Laravel and with this package 版本 4.0
问题是我有一个不同高度的问题列表，其中有 4 个选项，我不知道每个 div 标签的确切高度和大致高度，其中有哪些问题和答案选项，我不希望我的部分问题转到另一页
我的问题的所有部分都必须在 一页 上，如果不能做到这一点，mpdf 会将问题标签元素放在下一页（问题的所有部分）
这张图是暂时的，错误的是：
我想要的：
所以对于这个问题，我想知道我的问题元素的高度，这样我就可以确定新页面是否需要添加分页符（与 Whosebug 上的 this question 相同）或任何其他解决我的问题的方法
这是我的 blade 文件：
@php
error_reporting(0);
@endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:20mm;
}
@page {
footer: pagefooter;
margin-top: 0pt;
}
@page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
.sub-item-answer{
float: left;
display: inline !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer-num{
width: 5%;
float:right;
}
.q_1{
margin-top: 45px !important;
}
.question{
display: inline-block;
page-break-inside: avoid !important;
position: relative;
float:right;
}
.question-row{
display: inline !important;
width: 100%;
}
.question-number{
padding: 5px;
background: #bebe27;
border-radius: 10px;
width:10% !important;
text-align: center;
color:#ffffff;
font-weight: bold;
}
.main-question{
width: 95% !important;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
@php
$i = 0;
@endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
@foreach($data as $question)
@php
$i++;
$j=0;
@endphp
<div style="page-break-inside: avoid !important;" class="question q_{{$i}}">
<div class="row question-row">
<div class="question-number col-sm-1"> سوال{{$i}} </div>
<div class="main-question col-sm-11">
@if($question->title)
{!! $question->title !!}
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@else
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@endif
</div>
</div>
@if($question->options)
<div class="question-main-container" style="float: right">
@foreach($question->options as $option)
@php
$j++;
@endphp
<div class="item-answer center-block row">
<div class="sub-item-answer-num col-sm-1">{{$j}})</div>
@if($option->title)
<div class="sub-item-answer col-sm-11">
{!! $option->title !!}
@if($option->image_url)
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
@endif
</div>
@else
@if($option->image_url)
<div class="sub-item-answer col-sm-11">
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
</div>
@endif
@endif
</div>
@endforeach
</div>
@endif
<hr>
</div>
@endforeach
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: center;direction: rtl;">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">
</htmlpagefooter>
</body>
</html>
我尝试了 documentation of mpdf and this answer 中的所有方法，但结果没有用
如果有任何其他解决方案，请指导我
为您的区块使用 page-break-inside: avoid;（参见 https://mpdf.github.io/css-stylesheets/supported-css.html）
经过多次尝试，问题解决了！
当我有一个块元素循环时，page-break-inside: avoid; 不起作用
我对每个问题都使用了 table 并将其放在主 table 和 <td> 标签中，内部 table 现在有 autosize="1" 这是需要的
另外，将此配置添加到 mPdf
$pdf->shrink_tables_to_fit = 1;
我将 page-break-inside: avoid 添加到主要 table 和 <tr> 循环中的问题
请注意，如果您遇到 undefined index error 尝试一般地解决它！但如果像我一样，它不固定使用 error_reporting(0);
更正后的 blade 文件：
@php
error_reporting(0);
@endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:40mm 20mm 40mm 20mm;
}
@page {
footer: pagefooter;
margin-top: 0pt;
}
@page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
p{
font-size:35px;
}
.sub-item-answer{
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer > img{
width: 100% !important;
min-height: 200px;
max-height: 500px;
}
.sub-item-answer-num{
width: 5%;
font-size: 35px;
}
.q_1{
margin-top: 45px !important;
}
.question-number{
padding: 20px !important;
background: #bebe27;
border-radius: 10px !important;
width:auto !important;
text-align: center;
color:#ffffff;
font-weight: bold;
height: auto;
font-size: 35px;
}
.main-question{
width: 95% !important;
font-size:30px;
}
.main-question > p{
font-size:30px !important;
}
.main-question > img{
width: 100% !important;
min-width: 800px !important;
max-width: 1000px !important;
min-height: 200px;
max-height: 500px;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
@php
$i = 0;
@endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
<table style="page-break-inside: avoid !important;">
@foreach($data as $question)
@php
$i++;
$j=0;
@endphp
<tr style="page-break-inside: avoid !important; min-height: 300px;">
<td>
<table autosize="1">
<tbody>
<tr>
<td><span class="question-number"> سوال{{$i}} </span></td>
<td class="main-question col-sm-11">
@if($question->title)
{!! $question->title !!}
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@else
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@endif
</td>
</tr>
@if($question->options)
@foreach($question->options as $option)
<tr>
@php
$j++;
@endphp
<td class="sub-item-answer-num col-sm-1">{{$j}})</td>
@if($option->title)
<td class="sub-item-answer col-sm-11" style="font-size:35px !important;">
{!! $option->title !!}
@if($option->image_url)
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
@endif
</td>
@else
@if($option->image_url)
<td class="sub-item-answer col-sm-11">
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
</td>
@endif
@endif
</tr>
@endforeach
@endif
</tbody>
</table>
</td>
</tr>
@endforeach
</table>
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: left;direction: rtl; font-size: 15px; margin-top: 50px; padding-left:100px">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="width: 100%;">
</htmlpagefooter>
</body>
</html>
我正在使用 mpdf in Laravel and with this package 版本 4.0
问题是我有一个不同高度的问题列表，其中有 4 个选项，我不知道每个 div 标签的确切高度和大致高度，其中有哪些问题和答案选项，我不希望我的部分问题转到另一页
我的问题的所有部分都必须在 一页 上，如果不能做到这一点，mpdf 会将问题标签元素放在下一页（问题的所有部分）
这张图是暂时的，错误的是：
我想要的：
所以对于这个问题，我想知道我的问题元素的高度，这样我就可以确定新页面是否需要添加分页符（与 Whosebug 上的 this question 相同）或任何其他解决我的问题的方法
这是我的 blade 文件：
@php
error_reporting(0);
@endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:20mm;
}
@page {
footer: pagefooter;
margin-top: 0pt;
}
@page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
.sub-item-answer{
float: left;
display: inline !important;
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer-num{
width: 5%;
float:right;
}
.q_1{
margin-top: 45px !important;
}
.question{
display: inline-block;
page-break-inside: avoid !important;
position: relative;
float:right;
}
.question-row{
display: inline !important;
width: 100%;
}
.question-number{
padding: 5px;
background: #bebe27;
border-radius: 10px;
width:10% !important;
text-align: center;
color:#ffffff;
font-weight: bold;
}
.main-question{
width: 95% !important;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
@php
$i = 0;
@endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
@foreach($data as $question)
@php
$i++;
$j=0;
@endphp
<div style="page-break-inside: avoid !important;" class="question q_{{$i}}">
<div class="row question-row">
<div class="question-number col-sm-1"> سوال{{$i}} </div>
<div class="main-question col-sm-11">
@if($question->title)
{!! $question->title !!}
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@else
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@endif
</div>
</div>
@if($question->options)
<div class="question-main-container" style="float: right">
@foreach($question->options as $option)
@php
$j++;
@endphp
<div class="item-answer center-block row">
<div class="sub-item-answer-num col-sm-1">{{$j}})</div>
@if($option->title)
<div class="sub-item-answer col-sm-11">
{!! $option->title !!}
@if($option->image_url)
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
@endif
</div>
@else
@if($option->image_url)
<div class="sub-item-answer col-sm-11">
<img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />
</div>
@endif
@endif
</div>
@endforeach
</div>
@endif
<hr>
</div>
@endforeach
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: center;direction: rtl;">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">
</htmlpagefooter>
</body>
</html>
我尝试了 documentation of mpdf and this answer 中的所有方法，但结果没有用
如果有任何其他解决方案，请指导我
为您的区块使用 page-break-inside: avoid;（参见 https://mpdf.github.io/css-stylesheets/supported-css.html）
经过多次尝试，问题解决了！
当我有一个块元素循环时，page-break-inside: avoid; 不起作用
我对每个问题都使用了 table 并将其放在主 table 和 <td> 标签中，内部 table 现在有 autosize="1" 这是需要的
另外，将此配置添加到 mPdf
$pdf->shrink_tables_to_fit = 1;
我将 page-break-inside: avoid 添加到主要 table 和 <tr> 循环中的问题
请注意，如果您遇到 undefined index error 尝试一般地解决它！但如果像我一样，它不固定使用 error_reporting(0);
更正后的 blade 文件：
@php
error_reporting(0);
@endphp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>سوالات</title>
<style>
html, body {
background-color: #fff;
color: #636b6f;
font-family: 'fa', sans-serif;
direction: rtl;
}
.main-container{
padding:40mm 20mm 40mm 20mm;
}
@page {
footer: pagefooter;
margin-top: 0pt;
}
@page:first {
header: firstheader;
margin-bottom: 200pt;
}
.item-answer{
display: inline !important;
width: 100%;
}
p{
font-size:35px;
}
.sub-item-answer{
margin-top: 0 !important;
padding-top: 0 !important;
height: auto !important;
margin-bottom: auto !important;
}
.sub-item-answer > img{
width: 100% !important;
min-height: 200px;
max-height: 500px;
}
.sub-item-answer-num{
width: 5%;
font-size: 35px;
}
.q_1{
margin-top: 45px !important;
}
.question-number{
padding: 20px !important;
background: #bebe27;
border-radius: 10px !important;
width:auto !important;
text-align: center;
color:#ffffff;
font-weight: bold;
height: auto;
font-size: 35px;
}
.main-question{
width: 95% !important;
font-size:30px;
}
.main-question > p{
font-size:30px !important;
}
.main-question > img{
width: 100% !important;
min-width: 800px !important;
max-width: 1000px !important;
min-height: 200px;
max-height: 500px;
}
.row {
margin-left: -15mm;
margin-right: -15mm;
}
</style>
</head>
<body>
@php
$i = 0;
@endphp
<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>
<htmlpageheader name="firstheader">
<img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">
</htmlpageheader>
<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>
<sethtmlpageheader name="pageheader" value="on"/>
<div class="main-container container-fluid">
<table style="page-break-inside: avoid !important;">
@foreach($data as $question)
@php
$i++;
$j=0;
@endphp
<tr style="page-break-inside: avoid !important; min-height: 300px;">
<td>
<table autosize="1">
<tbody>
<tr>
<td><span class="question-number"> سوال{{$i}} </span></td>
<td class="main-question col-sm-11">
@if($question->title)
{!! $question->title !!}
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@else
@if($question->image_url)
<img class="img-responsive" src="{{$question->image_url}}" alt="test">
@endif
@endif
</td>
</tr>
@if($question->options)
@foreach($question->options as $option)
<tr>
@php
$j++;
@endphp
<td class="sub-item-answer-num col-sm-1">{{$j}})</td>
@if($option->title)
<td class="sub-item-answer col-sm-11" style="font-size:35px !important;">
{!! $option->title !!}
@if($option->image_url)
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
@endif
</td>
@else
@if($option->image_url)
<td class="sub-item-answer col-sm-11">
<img style="width: 100% !important;min-height: 200px;max-height: 500px;" src="{{$option->image_url}}" alt="test" />
</td>
@endif
@endif
</tr>
@endforeach
@endif
</tbody>
</table>
</td>
</tr>
@endforeach
</table>
</div>
<htmlpagefooter name="pagefooter">
<p style="text-align: left;direction: rtl; font-size: 15px; margin-top: 50px; padding-left:100px">
صفحه {PAGENO}
</p>
<img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="width: 100%;">
</htmlpagefooter>
</body>
</html>