Question

我有一个控制器功能，可以从视图中生成PDF。我想打印一个背景页面和背景白色部分内容。我在第一页上有分数和完善的措施，但我有两个问题：

在第二页上，内容显示没有边距，就在页面顶部。
背景仅在第二页（内容完成的位置）上打印一半大小。

这是HTML：

x=pd.pivot_table(df, values='amount', index=['exdiv','paydate','type'], columns=[])

这是CSS代码

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

如您所见，我将页面和正文边距和填充设置为0为了在所有纸张中设置背景，并在{的空白部分设置@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; } div，边距为.cuerpo的背景。第一页工作几乎完美，第二页不遵循这条规则。

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版本的信息，我将更新此答案。

Laravel和DOMPDF - 设置内容边距

1 个答案: