根据BrianS的请求更新

Question

我正在将基本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纸，结果相同。

我也试过在设置纸之前移动渲染（）并且重叠的问题消失了，但它只会呈现为肖像（在这里也试过A4）。

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

这就是结果...... enter image description here

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

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

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

我不认为那里有什么太不寻常，但也许我错了。如果您需要其他信息，请与我们联系。感谢。

Answer 1

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

一般情况下，我建议使用百分比来更好地在页面边界内放置一个元素，除了dompdf在页边距周围有点模糊，所以如果你需要在页面上放置内容，你必须在那里添加一些额外的像素（这就是为什么我通常会为整页元素定位内容）。

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

至于为什么布局在那之后如此可怕地破坏......我不知道。通常布局中断是由于格式不正确的HTML，但你的很好。如果我猜测我会说在分页符中丢失了父元素会导致空位置信息。这是我们必须要考虑的事情。

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

您只需在页面级别设置边距。如果我没记错，那就定义了HTML元素的边距。未定义正文边距，因此默认为0px。
正文高度和宽度始终是页面内容区域的高度/宽度;除非你真的希望身体不填充页面，否则无需设置。

dompdf尚不支持box-sizing（否则这将更加简单）。高度和宽度由内容框定义，并且额外的边距/填充添加到内容框以获得完整的框大小（另外请记住页边距周围所需的神秘额外填充）。 / LI>

我改变了你的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格局输出混乱

根据BrianS的请求更新

1 个答案: