2016-07-29 94 views
0

我有一個控制器功能,從視圖中生成PDF。我想打印一個帶有背景和背景白色部分內容的頁面。我有點在第一頁完美的措施,但我有兩個問題:但我有兩個問題:Laravel和DOMPDF - 設置內容邊距

  • 在第二頁的內容顯示無邊距,只是在頁面的頂部。
  • 背景僅在第二頁(內容完成時)打印其大小的一半。

這是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。爲了設置所有紙張中的背景以及.cuerpo div,邊距margin: 107.402pt 56.693pt 99.213pt 53.858pt;設置在背景的空白部分。第一頁的作品幾乎完美,第二頁不遵循這個規則。

回答

0

頁面元素不會在頁面間重複頁邊距(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版本的信息,我會更新此答案。