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

Ali*_*Ali 5 php pdf pdf-generation mpdf laravel-blade

我在 Laravel 中使用mpdf并使用此软件包版本 4.0

\n

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

\n

我的问题的所有部分都必须在一页上,如果这不可能发生,mpdf 将该问题标签元素放在下一页上(问题的所有部分)

\n

这张图片是现在的,这是错误的:

\n

示例问题列表

\n

我想要的是:

\n

这个图片

\n

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

\n

这是我的刀片文件:

\n

\r\n
\r\n
@php\n    error_reporting(0);\n@endphp\n\n    <!DOCTYPE html>\n<html>\n<head>\n    <meta charset="utf-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1">\n    <meta http-equiv="X-UA-Compatible" content="ie=edge">\n\n    <title>\xd8\xb3\xd9\x88\xd8\xa7\xd9\x84\xd8\xa7\xd8\xaa</title>\n\n    <style>\n        html, body {\n            background-color: #fff;\n            color: #636b6f;\n            font-family: \'fa\', sans-serif;\n            direction: rtl;\n        }\n\n        .main-container{\n            padding:20mm;\n        }\n\n        @page {\n            footer: pagefooter;\n            margin-top: 0pt;\n        }\n\n        @page:first {\n            header: firstheader;\n            margin-bottom: 200pt;\n        }\n\n        .item-answer{\n            display: inline !important;\n            width: 100%;\n        }\n\n        .sub-item-answer{\n            float: left;\n            display: inline !important;\n            margin-top: 0 !important;\n            padding-top: 0 !important;\n            height: auto !important;\n            margin-bottom: auto !important;\n        }\n\n        .sub-item-answer-num{\n            width: 5%;\n            float:right;\n        }\n\n        .q_1{\n            margin-top: 45px !important;\n        }\n\n        .question{\n            display: inline-block;\n            page-break-inside: avoid !important;\n            position: relative;\n            float:right;\n        }\n\n        .question-row{\n            display: inline !important;\n            width: 100%;\n        }\n\n        .question-number{\n            padding: 5px;\n            background: #bebe27;\n            border-radius: 10px;\n            width:10% !important;\n            text-align: center;\n            color:#ffffff;\n            font-weight: bold;\n        }\n\n        .main-question{\n            width: 95% !important;\n        }\n\n        .row {\n            margin-left: -15mm;\n            margin-right: -15mm;\n        }\n    </style>\n</head>\n<body>\n@php\n    $i = 0;\n\n@endphp\n\n<htmlpageheader name="pageheader" style="display:none"></htmlpageheader>\n\n<htmlpageheader name="firstheader">\n    <img style="width: 100%;height:fit-content" src="http://api.amoozeshmelli.com/images/pdf/header.png" alt="header">\n</htmlpageheader>\n\n<sethtmlpageheader name="firstheader" value="on" show-this-page="1"/>\n\n<sethtmlpageheader name="pageheader" value="on"/>\n\n<div class="main-container container-fluid">\n\n    @foreach($data as $question)\n        @php\n            $i++;\n            $j=0;\n        @endphp\n\n        <div style="page-break-inside: avoid !important;" class="question q_{{$i}}">\n\n            <div class="row question-row">\n\n                <div class="question-number col-sm-1"> \xd8\xb3\xd9\x88\xd8\xa7\xd9\x84{{$i}} </div>\n\n                <div class="main-question col-sm-11">\n                    @if($question->title)\n\n                        {!! $question->title !!}\n\n                        @if($question->image_url)\n                            <img class="img-responsive" src="{{$question->image_url}}" alt="test">\n                        @endif\n                    @else\n                        @if($question->image_url)\n                            <img class="img-responsive" src="{{$question->image_url}}" alt="test">\n                        @endif\n                    @endif\n                </div>\n\n            </div>\n\n            @if($question->options)\n                <div class="question-main-container" style="float: right">\n                    @foreach($question->options as $option)\n                        @php\n                            $j++;\n                        @endphp\n                        <div class="item-answer center-block row">\n                            <div class="sub-item-answer-num col-sm-1">{{$j}})</div>\n                            @if($option->title)\n                                <div class="sub-item-answer col-sm-11">\n                                    {!! $option->title !!}\n                                    @if($option->image_url)\n                                        <img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />\n                                    @endif\n                                </div>\n                            @else\n                                @if($option->image_url)\n                                    <div class="sub-item-answer col-sm-11">\n                                        <img style="width: auto; height:80px;" src="{{$option->image_url}}" alt="test" />\n                                    </div>\n                                @endif\n                            @endif\n                        </div>\n                    @endforeach\n                </div>\n\n            @endif\n            <hr>\n        </div>\n    @endforeach\n\n\n</div>\n\n\n\n<htmlpagefooter name="pagefooter">\n    <p style="text-align: center;direction: rtl;">\n        \xd8\xb5\xd9\x81\xd8\xad\xd9\x87 {PAGENO}\n    </p>\n\n    <img src="http://api.amoozeshmelli.com/images/pdf/footer.png" alt="header" style="z-index: 0 !important;width: 100%;">\n</htmlpagefooter>\n\n</body>\n</html>
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n

我尝试了mpdf 文档中的所有方法和这个答案,但结果没有用

\n

如果存在任何其他解决方案,请指导我

\n

Ali*_*Ali 5

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

\n

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

\n

我对每个问题都使用了一个表,并将其放在主表和它的<td>标签中,内表现在有autosize="1"需要的内容

\n

另外,将此配置添加到 mPdf

\n
$pdf->shrink_tables_to_fit = 1;\n
Run Code Online (Sandbox Code Playgroud)\n

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

\n

请注意,如果您遇到未定义索引错误,请尝试一般解决它!但如果像我一样,它没有固定用途error_reporting(0);

\n

更正后的刀片文件:

\n

\r\n
\r\n
$pdf->shrink_tables_to_fit = 1;\n
Run Code Online (Sandbox Code Playgroud)\r\n
\r\n
\r\n

\n