【问题标题】：DOMPDF landscape output is messed upDOMPDF 横向输出搞砸了
【发布时间】：2015-05-27 02:57:51
【问题描述】：

我正在将基本 HTML 加载到 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);

我也试过用A4纸，结果一样。

我还尝试在设置纸张之前移动 render()，重叠问题消失了，但它只会渲染为纵向（这里也尝试过 A4）。

我没有尝试在浏览器中渲染下载之前输出为实际文件，但我会。

这就是结果的样子...

任何建议表示赞赏。谢谢。

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

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

我不认为那里有什么太不寻常的地方，但也许我错了。如果您需要更多信息，请告诉我。谢谢。

【问题讨论】：

这是一个很奇怪的问题。看起来 HTML 或 CSS 中的某些内容正在破坏 dompdf 的布局跟踪。但是如果没有看到导致问题的示例文档（HTML 和 CSS）（而不是生成文档的 PHP），我们就无法真正调试它。

标签： landscape dompdf

【解决方案1】：

当您推动页面边界时，高度在 dompdf 中是一件棘手的事情。对于整页块，我建议使用定位内容。如果这不可能，我会将 DOMPDF_DPI 设置为 72（PDF 的固定“像素”深度），以便您获得从 HTML 到 PDF 的一对一翻译。

一般来说，我建议使用百分比来更好地将元素放置在页面边界内，除了 dompdf 在页边距周围有点模糊，因此如果需要将内容适合页面，则必须在此处提供一些额外的像素（这就是为什么我通常会为整页元素选择定位内容）。

在您的情况下，让我们在横向使用 A4 尺寸的纸张（因为您提到了它）。该纸张尺寸/布局为您提供大约 595 像素的高度。将文档的所有高度加起来完全超过该高度（粗略估计> 1100），这意味着将发生分页。 dompdf 将容器的最后一行拖到下一页。所以这解释了初始块的文本布局。

至于为什么在那之后布局如此糟糕……我不知道。通常布局中断是由于 HTML 格式不正确，但你的很好。如果我猜我会说父元素在分页符处丢失，从而导致空定位信息。这是我们必须要研究的。

在我继续做一些笔记之前：

您只需要在页面级别设置边距。如果我没记错的话，它定义了 HTML 元素的边距。正文边距未定义，因此默认为 0px。
正文高度和宽度始终是页面内容区域的高度/宽度；除非您真的不希望正文填满页面，否则无需设置。
dompdf 还不支持box-sizing（否则这一切都会简单得多）。 content 框定义了高度和宽度，并将额外的边距/填充添加到内容框以获得完整的盒子大小（另外请记住页面边距周围所需的神秘额外填充）。

我稍微修改了您的 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 也有相当多的劣势。

【讨论】：

非常感谢这个有用的反馈。 DOMPDF 处理类是否比内联样式更好，还是无所谓？我会试一试，并尽快让你知道结果。
dompdf 应该能够处理您的样式，无论您如何定义它们（内联与样式表）。我以这种方式编写 HTML 主要是为了帮助可视化布局/样式。如果您想保留任何不应该发布任何问题的相关 CSS 内联。