Ali*_*Ali 5 php pdf pdf-generation mpdf laravel-blade
我在 Laravel 中使用mpdf并使用此软件包版本 4.0
\n问题是我有一个不同高度的问题列表,其中有 4 个选项,而且我不知道每个 div 标签的确切高度和近似高度,其中有哪些问题和答案选项,我不想要某些部分我的问题转到另一个页面
\n我的问题的所有部分都必须在一页上,如果这不可能发生,mpdf 将该问题标签元素放在下一页上(问题的所有部分)
\n这张图片是现在的,这是错误的:
\n
我想要的是:
\n\n所以对于这个问题,我想知道我的问题元素的高度,以便我可以确定是否需要新页面来添加分页符(与StackOverflow 上的这个问题相同),或者任何其他解决方案来解决我的问题
\n这是我的刀片文件:
\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如果存在任何其他解决方案,请指导我
\n经过多次尝试,问题解决了!
\n当我有一个块元素循环时,它page-break-inside: avoid;不起作用
我对每个问题都使用了一个表,并将其放在主表和它的<td>标签中,内表现在有autosize="1"需要的内容
另外,将此配置添加到 mPdf
\n$pdf->shrink_tables_to_fit = 1;\nRun Code Online (Sandbox Code Playgroud)\n我添加page-break-inside: avoid到主表和<tr>循环中的问题
请注意,如果您遇到未定义索引错误,请尝试一般解决它!但如果像我一样,它没有固定用途error_reporting(0);
更正后的刀片文件:
\n$pdf->shrink_tables_to_fit = 1;\nRun Code Online (Sandbox Code Playgroud)\r\n