沃梦达 / 编程问答 / php问题 / 正文

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

php问题
2022-01-01

mPDF - Page break based on element height(mPDF-基于元素高度的分页符)

本文介绍了mPDF-基于元素高度的分页符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在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-基于元素高度的分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

本文标题为：mPDF-基于元素高度的分页符

上一篇： 在Laravel项目中运行热NPM引发无效配置错误(&Q；；NPM)
下一篇： 从特定键的嵌套数组行收集所有值

基础教程推荐

学习HTML
学习jQuery
学习Laravel
学习CSS3
学习Vue.js
学习Bootstrap5
学习ThinkPHP
学习AJAX
猜你喜欢
最新文章
热门文章
编程基础
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2