问题

I'm loading basic HTML into DOMPDF. In landscape mode, all the pages after the first are overlapping.

Here is my (basic) HTML which renders fine in the browser:

<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>

Here is my DOMPDF render logic:

$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);

I tried with A4 paper as well, same result.

I also tried moving the render() BEFORE set-paper and the overlapping issue goes away, but it will ONLY render as portrait (tried A4 here as well).

I have not tried outputing as actual file before rendering in browser for download, but I will.

This is what the result looks like...

Any suggestions appreciated. Thanks.

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

UPDATE Per Request from BrianS

Thanks for your attention. Here is a dump of the rendered 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>

I don't think there's anything too unusual in there, but maybe I'm wrong. Let me know if you need additional information. Thanks.

回答1:

Heights are a tricky thing in dompdf when you're pushing against the page boundaries. For full-page blocks I recommend using positioned content. If this isn't possible I'd set DOMPDF_DPI to 72 (the fixed "pixel" depth of a PDF) so that you get a one-to-one translation from HTML to PDF.

In general I suggest using percents to better place an element within the page boundaries, except that dompdf is a bit more fuzzy around the page margins so you have to give a few extra pixels there if you need to fit content to a page (this is why I usually go for positioned content for full-page elements).

In your case let's work with a paper size of A4 in landscape (since you mentioned it). That paper size/layout gives you a height of roughly 595 pixels. Adding up all the heights your document totally blows past that (>1100 in a rough estimate) which means paging will occur. dompdf is dragging the last line of the container to the next page. So this explains the text layout for the initial block.

As for why the layout breaks so horribly after that ... I have no idea. Usually a layout break is due to poorly-formed HTML, but yours is just fine. Were I to guess I'd say a parent element is lost on page break resulting in null positioning information. This is something we'll have to look at.

Before I continue some notes:

You only need to set margins on the page level. If I recall correctly that defines the margin for the HTML element. The body margin is not defined and so default to 0px.
body height and width is always the height/width of the page content area; no need to set that unless you really want the body to not fill the page.
dompdf does not yet support box-sizing (otherwise this would all be much simpler). height and width are defined by the content box and extra margin/padding is added to the content box to get the full box size (plus keep in mind the mysterious extra padding required around the page margins).

I changed up your HTML/CSS a bit to make it do what you want. Simpler is better, especially for 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>

When working with any tools you should always keep in mind it's strength and weaknesses ... and dompdf has its fair share of weaknesses.

来源：https://stackoverflow.com/questions/30386157/dompdf-landscape-output-is-messed-up

标签

landscape

dompdf

DOMPDF landscape output is messed up

问题

UPDATE Per Request from BrianS

回答1: