Laravel 和 DOMPDF - 设置内容边距

Question

我有一个从视图生成 PDF 的控制器功能。我想打印一个带有背景的页面和背景白色部分内的内容。我有以点为单位的措施，并且在第一页上效果很好，但我有两个问题：

• 在第二页上显示的内容没有边距，就在页面顶部。
• 背景只在第二页（内容结束的地方）打印了一半大小。

这是 HTML：

   <div class="contenedor">
      <div class="cuerpo">
        <h3 style="margin: 20px 0;">Candidatos contratados a día {{ Date('d/m/Y') }}</h3>
        <table class="table" style="border: 0;">
          <thead>
            <tr style="text-transform: uppercase;">
              <th width="40%" style="background-color: #DBDBDB;">Candidato</th>
              <th width="40%" style="background-color: #F1F1F1;">Posto</th>
              <th width="20%" style="background-color: #F1F1F1;">Tipo</th>
              <th width="5%" style="background-color: #F1F1F1;">Horas</th>
            </tr>
          </thead>
          <tbody>
            @foreach($clientes as $cliente)
              <tr>
                <td width="40%" style="background-color: #EBEDED;" data-title="Candidato">{{ $cliente->apellidos }}, {{ $cliente->nombre }}</td>
                <td width="40%"  data-title="Posto">{{ $cliente->puesto }}</td>
                <td width="10%" data-title="Tipo">{{ $cliente->tipo }}</td>
                <td width="10%" data-title="Horas">{{ $cliente->horas_semanales }}</td>
              </tr>
            @endforeach
          </tbody>
        </table>
      </div>
    </div>

这是 CSS 代码

  @page {
    margin: 0;
  }
  *{
    color: #111;
  }
  body {
    font-size: 11pt;
    padding: 0;
    margin: 0;
  }
  .contenedor{
    background-image: url('{{ URL::asset('images/fondo-imprimir.jpg') }}');
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .background{
    position: fixed;
    top: 0;
    left: 0;
    width: 595.276pt;
    height: 841.89pt;
    z-index: 1;
  }
  .background img{
    width: 100%;
    height: auto;
  }
  .cuerpo{
    page-break-after: auto;
    max-width: 484.725pt;
    max-height: 635.275pt;
    z-index: 10;
    margin: 107.402pt 56.693pt 99.213pt 53.858pt;
  }
  tr  { page-break-before: auto; max-height: 40pt; }
  td{
    border-bottom: 1px dotted rgba(0,0,0,0.04);
  }
  #duracion, #completado{ display: none; }

如您所见，我将页面和正文的边距和填充设置为0，以便在所有纸张中设置背景，并将边距为margin: 107.402pt 56.693pt 99.213pt 53.858pt; 的.cuerpo div 设置在背景的空白部分。第一页几乎完美，第二页不遵循此规则。

Answer 1

分页的元素不会跨页复制其页边距 (see issue #640)。您想要做的是将页边距设置为 0 并填充正文。

假设您的 .cuerpo div 具有正确的间距，您可以尝试以下操作：

  @page {
    margin: 0;
  }
  *{
    color: #111;
  }
  body {
    font-size: 11pt;
    padding: 107.402pt 56.693pt 99.213pt 53.858pt;
    margin: 0;
  }
  .contenedor{
    background-image: url('{{ URL::asset('images/fondo-imprimir.jpg') }}');
    background-repeat: no-repeat;
    background-position: 0 0;
  }
  .background{
    position: fixed;
    top: 0;
    left: 0;
    width: 595.276pt;
    height: 841.89pt;
    z-index: 1;
  }
  .background img{
    width: 100%;
    height: auto;
  }
  .cuerpo{
    page-break-after: auto;
    max-width: 484.725pt;
    max-height: 635.275pt;
    z-index: 10;
  }
  tr  { page-break-before: auto; max-height: 40pt; }
  td{
    border-bottom: 1px dotted rgba(0,0,0,0.04);
  }
  #duracion, #completado{ display: none; }

至于半页问题，这可能是如何确定正文高度的问题（取决于您的 dompdf 版本）。添加有关您的 dompdf 版本的信息，我将更新此答案。