mPDF-基于元素高度的分页符

本教程将介绍mPDF-基于元素高度的分页符的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

mPDF-基于元素高度的分页符 教程 第1张

问题描述

我在Laravel中使用mpdf和this package 版本4.0

问题是,我有一个不同高度的问题列表,其中有4个选项,而我不知道每个div标签的确切和大致高度,其中有问题和答案选项,我不希望问题的某些部分转到另一个页面

我的问题的所有部分都必须在一页上,如果不能出现这种情况,mpdf会将该问题标记元素放在下一页(问题的所有部分)

此图片暂时错误:

我想要的:

This image

因此,对于此问题,我想知道问题元素的高度,以便我可以确定是否需要新页面来添加分页符(与StackOverflow上的this question相同),或者需要任何其他解决方案来解决我的问题

这是我的刀片文件:

@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和this answer中的所有方法,但结果都没有用

如果还有其他解决方案,请指导我

推荐答案

经过多次尝试,问题解决了!

当我有一个挡路元素循环时page-break-inside: avoid;不起作用

我为每个问题都使用了一个表,并将其放入主表中,在其<td>标记中,内表现在具有所需的autosize="1"

另外,将此配置添加到mPdf

$pdf->shrink_tables_to_fit = 1;

我将page-break-inside: avoid添加到主表,将<tr>添加到循环中的问题

请注意,如果您面对的是undefined index error,请尝试一般地解决它!但如果像我一样,它不能修复使用error_reporting(0);

更正的刀片文件:

@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-基于元素高度的分页符的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。