2017-06-29 10 views
0

私はpdf請求書を作成するためにDompdfを使用していますが、うまくいっていますが、背景のイメージを紙に記入する必要があります(A4)。私はヘッダー、コンテンツ、フッターのセクションを持っていて、私が身体の背景イメージを入れても機能していないのです。Dompf corporative paper as background

私のHTMLは次のとおりです。

<!doctype html> 
     <html> 
     <head> 
     <meta charset='utf-8'> 
     <title>Factura XXXX, S.A. con fecha 2017-06-30</title> 

     <style> 
     .invoice-header{ 
      max-width:800px; 
      padding:10px; 
      font-size:12px; 
      line-height:15px; 
      font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
      color:#555; 
     } 

     .invoice-header table { 
      border-collapse: collapse; 
     } 

     .invoice-header table tr td table tr td { 
      border:1px solid black; 
     } 

     .invoice-header table td{ 
      padding:2px; 
      vertical-align:top; 
     } 

     .invoice-header table tr.heading td{ 
      background:#eee; 
      font-weight:bold; 
     } 

     .invoice-footer{ 
      max-width:800px; 
      margin:10px 10px 10px 10px; 
      padding:10px; 
      font-size:12px; 
      line-height:15px; 
      font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
      color:#555; 
     } 

     .invoice-footer table { 
      border-collapse: collapse; 
      width: 100% 
     } 

     .invoice-footer table tr td table tr td { 
      border:1px solid black; 
     } 

     .invoice-footer table td{ 
      padding:2px; 
      vertical-align:top; 
     } 

     .invoice-footer table tr.heading td{ 
      background:#eee; 
      font-weight:bold; 
     } 

     .invoice-box{ 
      max-width:800px; 
      height: 509.921259845px; 
     max-height: 509.921259845px; 
      border:1px solid black; 
      margin:10px 6px 10px 6px; 
      padding:10px; 
      font-size:12px; 
      line-height:15px; 
      font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
      color:#555; 
     } 

     .invoice-box table{ 
      width:100%; 
      text-align:left; 
     } 

     .invoice-box table td{ 
      padding:2px; 
      vertical-align:top; 
     } 

     .invoice-box table tr.top table td{ 
      padding-bottom:10px; 
     } 

     .invoice-box table tr.top table td.title{ 
      font-size:45px; 
      line-height:45px; 
      color:#333; 
     } 

     .invoice-box table tr.information table td{ 
      padding-bottom:10px; 
      line-height:20px; 
     } 

     .invoice-box table tr.heading td{ 
      background:#eee; 
      font-weight:bold; 
     } 

     .invoice-box table tr.details td{ 
      padding-bottom:10px; 
     } 

     .invoice-box table tr.item td{ 
     } 

     .invoice-box table tr.item.last td{ 
      border-bottom:none; 
     } 

     .invoice-box table tr.total td{ 
      font-weight:bold; 
     } 

     @media only screen and (max-width: 600px) { 
      .invoice-box table tr.top table td{ 
       width:100%; 
       display:block; 
       text-align:center; 
      } 

      .invoice-box table tr.information table td{ 
       width:100%; 
       display:block; 
       text-align:center; 
      } 
     } 

     .page-number:before { 
      content: counter(page); 
     } 

     .body{ 
      counter-reset: page 0; 
     } 

     #header { position: fixed; 
          top: -250px; 
         } 
     #footer { position: fixed; 
          bottom: 160px; 
          width: 100%; 
         text-align: center; 
          font-family:'Helvetica Neue', 'Helvetica', Helvetica, Arial, sans-serif; 
          font-size:8px; 
     } 
     #content { 
      position: fixed; 
      top: -80px; 
     } 

     @page { 
      margin: 432.283464565px 10px 57.79527559px 10px; 
     } 
     </style> 
     </head> 

     <body> 
    <div id='header'> 
     <div class='invoice-header'> 
     <table border=0 cellpadding='0' cellspacing='0' style='width:100%;'> 
      <tr> 
       <td width='50%'> 
        <table cellpadding='5' style='white-space: nowrap; text-align:center;'> 
        <tr class='heading'> 
         <td style='padding: 5px;'>Numero Factura</td> 
         <td style='padding: 5px;'>Fecha Factura</td> 
        </tr> 
        <tr> 
         <td style='padding: 5px;'>12313/2017</td> 
         <td style='padding: 5px;'>30/06/2017</td> 
        </tr> 
        </table> 
       </td> 
       <td width='50%'> 
        <table border=1 cellpadding='5' style='width:100%;'> 
         <tr> 
          <td style='line-height: 150%;'> 
          <div align='right'>123</div> 
          XXXXXXX, S.A.<br> 
          ADDRESS <br> 
          28042, MADRID<br> 
          Madrid<br> 
          CIF/NIF: 123123123 
          </td> 
         </tr> 
        </table> 
       </td> 
      </tr> 
     </table> 
     </div> 
    </div> 
    <!-- Fin Cabecera --> 
    <!-- Inicio pie pagina --> 
     <div id='footer'> 
      <div class='invoice-footer'> 
       <table border=0 > 
        <tr> 
         <td style='width:25%'> 
          <table border=1 style='width:100%'> 
           <tr class='heading' style='text-align: center'><td>Forma de Pago<br> 
            CONFIRMING 60 DIAS F.F.</td></tr> 
           <tr class='heading' style='text-align: center'><td>Vencimiento</td></tr><tr style='text-align: center'><td>29/08/2017 - 148,04 €</td></tr> 
          </table> 
         </td> 
         <td style='width:40%'> 
          <table border=1 style='width:100%'> 
           <tr class='heading' style='text-align: center'> 
            <td colspan='5' style='height:16px'></td> 
           </tr> 
           <tr class='heading'> 
            <td>Iban</td> 
            <td>Entidad</td> 
            <td>Sucursal</td> 
            <td>D.C</td> 
            <td>Nº Cuenta</td> 
           </tr> 
           <tr> 
            <td style='text-align: center; height:16px'></td> 
            <td style='text-align: center; height:16px'></td> 
            <td style='text-align: center; height:16px'></td> 
            <td style='text-align: center; height:16px'></td> 
            <td style='text-align: center; height:16px'></td> 
           </tr> 
          </table> 
         </td> 
         <td style='width:35%'> 
         <!-- RESUMEN FACTURA --> 
          <table border=1 style='width:100%'> 
           <tr class='heading' style='text-align: center' nowrap><td colspan='2'>Resumen Factura</td></tr> 
          <tr><td style='text-align: left' nowrap>Base Imponible I.V.A 21% </td><td style='text-align: right' nowrap> 122,35 €</td></tr><tr><td style='text-align: left' nowrap>Importe I.V.A. 21% </td><td style='text-align: right' nowrap>25,69 €</td></tr><tr><td style='text-align: left' nowrap>Total </td><td style='text-align: right' nowrap>148,04 €</td></tr></table> 
         <!-- FIN RESUMEN FACTURA --> 
         </td> 
        </tr> 
       </table> 

      </div> 
     </div> 
    <!-- Fin pie pagina --> 
    <div id='content'> 
     <div class='invoice-box'> 
      <table border=0 cellpadding='0' cellspacing='0'> 
       <tr class='heading'> 
        <td colspan='2' style='text-align:left; padding-left:200px'> 
         Descripcion de los Servicios 
        </td> 
        <td style='text-align:right; padding-right:25px'> 
         Cantidad 
        </td> 
        <td style='text-align:right; padding-right:25px'> 
         Precio 
        </td> 
        <td style='text-align:right;'> 
         Total 
        </td> 
       </tr><tr> 
                 <td colspan='2' style='text-align:left: padding-left:5px'>POR LOS SERVICIOS PRESTADOS DE LIMPIEZA DURANTE EL MES JUNIO 
</td> 
                 <td style='text-align:right;padding-right:25px'>1,00</td> 
                 <td style='text-align:right;padding-right:25px'>122,35 €</td> 
                 <td style='text-align:right'>122,35 €</td> 
                </tr> 
      </table> 
      <!-- FIN Detalle del informe --> 
     </div> 
    </div> 
     </body> 
     </html> 

私は、バックグラウンドでのdivセクションを設定しますが、作業をいけないししようと試み:

#fondocorporativo{ 
      position:fixed 
      background-image: url(data:image;base64,".$fila_empresa['foliocorporativo']."); 
     } 

私も身体に背景画像を設定するためにしようと試みました。しかし、あまりにも動作しませんでした。例えば、この画像に設定する方法

:フル請求書の背景として

https://www.geydes.es/sites/default/files/portfolio-imagenes-proyectos/folio-corporativo-mazlim-geydes.jpg

をCSSでまたはDOMPDFキャンバス機能でそれを行うならば、それは問題をdoesntの。私は両方を試して、構成することはできません。

ありがとうございます。

答えて

1

最後に私は答えを得ます。私は

#foliocorporativo{ 
      position: absolute; 
      top:-430px 
      left:-1000px 
      z-index:-1; 
     } 

:その後、私はdivのコンテナのCSSスタイルを作成し

<div id='foliocorporativo'> 
    <img height='100%' width='100%' src='data:image/png;base64,".$fila_empresa['foliocorporativo']."'> 
</div> 

:私は私がそれこのような背景にしたい画像をimg要素を持っているのdivコンテナを作成します画像の幅が1100ピクセル、幅が780ピクセルの場合

EDIT:ヘッダーdiv内にdivを書く必要があります。そうしないと、最初のページにのみ背景が表示されます。