Я загружаю базовый HTML в DOMPDF. В ландшафтном режиме все страницы после первого перекрываются.Выход ландшафта DOMPDF испорчен

Вот мое (основное) HTML, который делает хорошо в браузере:

<div id="certificates-layout-1" style="<?php echo $styles['outer-container']; ?>"> 
    <div style="<?php echo $styles['inner-container']; ?>"> 
    <div style="<?php echo $styles['fullname']; ?>"> 
     <?php echo $data['fullname']; ?> 
    </div> 

    <div style="<?php echo $styles['fullcouncil']; ?>"> 
     <?php echo $data['fullcouncil']; ?> 
    </div> 

    <div style="<?php echo $styles['session_date']; ?>"> 
     <?php echo $data['session_date']; ?> 
    </div> 
    </div> 
</div>

Вот мой DOMPDF визуализации логики:

$filename = (isset($params['filename'])) ? $params['filename'] : 'ubcdet_report_' . date('YmdHis') . '.pdf'; 
$lib = $_SERVER['DOCUMENT_ROOT'] . '/sites/all/libraries/vendor/'; 
require_once($lib . "dompdf/dompdf/dompdf_config.inc.php"); 
$dompdf = new DOMPDF(); 
$dompdf->load_html($report); 
$dompdf->set_paper('letter', 'landscape'); 
$dompdf->render(); 
$dompdf->stream($filename, array("Attachment" => false)); 
exit(0);

Я попытался с бумагой формата А4, а также, тот же результат.

Я также попытался перемещать рендер() ПЕРЕД записью и перекрывающейся проблемой уходит, но она будет ТОЛЬКО визуализировать как портрет (здесь также используется A4).

Я не пробовал выводить как фактический файл перед рендерингом в браузере для загрузки, но я буду.

Это то, что результат выглядит ... enter image description here

Любые предложения оценили. Благодарю.

====================================

UPDATE Per Запрос от Brians

Спасибо за внимание. Вот дамп оказанного HTML:

<html> 
<head></head> 
<body> 
<div id="certificates-layout-1" style="font-family: Times New Roman; font-size:33px; text-align:center; page-break-after:auto;"> 
    <div style="height:672px; width: 906px; border: thin solid #666666;"> 
     <div style="font-size:45px; font-weight:bold; margin-top:96px; margin-bottom:10px;">John Smith</div> 
     <div style="margin-bottom:125px;">Council of Councils</div> 
     <div style="font-weight:bold;">April 16 - 19, 2015</div> 
    </div> 
</div> 
<style> 
    @font-face { 
     font-family: TimesBold; 
     src: url('/sites/all/modules/ubcdet/ubcdet_report/fonts/timesbd.ttf'); 
    } 
</style> 
<style> 
    } 
    @page { 
     margin: 0; 
    } 

    html { 
     margin: 72px 76px; 
    } 

    body { 
     width: 1056px; 
     margin:0; 
    } 

    .hint { 
     background: none repeat scroll 0 0 #6AEA91; 
     font-size: 13px; 
     padding: 50px 10px; 
     text-align: center; 
     width: 250px; 
     position: absolute; 
    } 

    @media print { 
     .hint { 
      display:none; 
     } 
    } 
</style> 

</body> 
</html>

Я не думаю, что есть что-то слишком необычно, но, возможно, я ошибаюсь. Дайте мне знать, если вам нужна дополнительная информация. Благодарю.

источник

2015-05-21 bfuzze

Это довольно странная проблема. Похоже, что что-то в HTML или CSS нарушает раскладку макета dompdf. Но мы не можем отлаживать это, не видя пример документа (HTML и CSS), который вызывает проблему (а не PHP, который генерирует документ). – BrianS

Высоты - сложная вещь в dompdf, когда вы нажимаете на границы страниц. Для полностраничных блоков я рекомендую использовать позиционированный контент. Если это невозможно, я установил бы DOMPDF_DPI на 72 (фиксированная «пиксельная» глубина PDF-файла), чтобы вы получали взаимно-однозначный перевод из HTML в PDF.

В целом я предлагаю использовать проценты, чтобы лучше разместить элемент в границах страницы, за исключением того, что dompdf немного более нечеткий вокруг полей страницы, поэтому вам нужно дать несколько дополнительных пикселей там, если вам нужно подправить контент к (поэтому я обычно занимаюсь размещением контента для полностраничных элементов).

В вашем случае давайте работать с размером бумаги A4 в ландшафте (так как вы упомянули об этом). Этот формат/макет бумаги дает вам высоту примерно 595 пикселей. Добавляя все высоты, ваш документ полностью пробивается мимо (> 1100 в приблизительной оценке), что означает, что пейджинг будет происходить. dompdf перетаскивает последнюю строку контейнера на следующую страницу. Таким образом, это объясняет макет текста для начального блока.

Что касается того, почему макет ломается так ужасно после этого ... Я понятия не имею. Обычно разрытие макета происходит из-за плохо сформированного HTML, но ваш просто отлично. Если бы я догадался, я бы сказал, что родительский элемент теряется при разрыве страницы, что приводит к нулевой информации о местоположении. Это то, на что мы должны смотреть.

Прежде чем я продолжу некоторые примечания:

Вам нужно только установить поля на уровне страницы. Если я правильно помню, что определяет маржу для элемента HTML. Поля тела не определены и поэтому по умолчанию 0px.
высота и ширина тела всегда высота/ширина области содержимого страницы; не нужно устанавливать это, если вы действительно не хотите, чтобы тело не заполнило страницу.
dompdf еще не поддерживает box-sizing (иначе все было бы намного проще). высота и ширина определяются содержимым , а поле с дополнительными полями/дополнением добавляется в поле содержимого, чтобы получить полный размер коробки (плюс помните о таинственном дополнительном дополнении, требуемом для полей страницы).

Я немного изменил свой HTML/CSS, чтобы заставить его делать то, что вы хотите. Упрощение лучше, особенно для dompdf.

<html> 
 

 

 
<head> 
 

 
<style> 
 
    @page { 
 
    size: a4 landscape; 
 
    margin: 72px 76px; 
 
    } 
 

 
    body { 
 
    font-family: Times New Roman; 
 
    font-size: 33px; 
 
    text-align: center; 
 
    border: thin solid #666666; 
 
    } 
 

 
    .certificate-name { 
 
    font-size: 45px; 
 
    font-weight: bold; 
 
    margin-top: 96px; 
 
    margin-bottom:10px; 
 
    } 
 

 
    .certificate-title { 
 
    margin-bottom: 125px; 
 
    } 
 

 
    .certificate-date { 
 
    font-weight: bold; 
 
    } 
 
</style> 
 

 
</head> 
 

 

 
<body> 
 

 
<div id="certificates-layout-1"> 
 
    <div class="certificate-name">John Smith</div> 
 
    <div class="certificate-title">Council of Councils</div> 
 
    <div class="certificate-date">April 16 - 19, 2015</div> 
 
</div> 
 

 
<div id="certificates-layout-2"> 
 
    <div class="certificate-name">John Smith</div> 
 
    <div class="certificate-title">Council of Councils</div> 
 
    <div class="certificate-date">April 16 - 19, 2015</div> 
 
</div> 
 

 
</body> 
 

 

 
</html>

При работе с любыми инструментами, вы всегда должны иметь в виду, что это сильные и слабые стороны ... и DOMPDF имеет свою справедливую долю недостатков.

источник

2015-05-26 18:57:51 BrianS

Большое спасибо за эту полезную обратную связь. DOMPDF лучше справляется с классами, чем встроенные стили, или это безразлично? Я дам вам выстрел и дам вам знать результат как можно скорее. – bfuzze

dompdf должен иметь возможность обрабатывать ваши стили независимо от того, как вы их определяете (inline vs. stylesheets). Я написал HTML таким образом, чтобы в основном визуализировать макет/стиль. Если вы хотите сохранить соответствующий CSS-код, который не должен содержать никаких проблем. – BrianS

Выход ландшафта DOMPDF испорчен

UPDATE Per Запрос от Brians

ответ

Смежные вопросы