1. Zuhause
  2. Frage und Antwort
  3. Dompf korporatives Papier als Hintergrund

Dompf korporatives Papier als Hintergrund

2017-06-29 3 views
0

Ich benutze Dompdf, um PDF-Rechnung zu erstellen und funktioniert gut, aber ich muss ein Hintergrundbild füllen das Papier (A4). Ich habe eine Kopfzeile, Inhalt und Fußzeilenabschnitte und wenn ich das Hintergrundbild in den Körper stelle, funktioniert es nicht.Dompf korporatives Papier als Hintergrund

Mein html ist:

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

Ich habe versucht einen div Abschnitt mit einem Hintergrund zu konfigurieren, aber nicht funktionieren:

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

Ich habe versucht zu dem Hintergrundbild im Körper zu konfigurieren. Aber hat auch nicht funktioniert.

Wie zum Beispiel dieses Bild zu konfigurieren:

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

Als Hintergrund der vollständigen Rechnung, es Sachen taten, wenn es mit CSS oder mit dompdf Leinwand Funktion zu tun. Ich habe beides versucht und kann es nicht konfigurieren.

Vielen Dank.

Quelle

2017-06-29 Roke

Antwort

1

Endlich bekomme ich die Antwort. Ich erstelle ein div-Container, ein img-Element mit dem Bild habe ich den Hintergrund wie diese machen wollen:

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

Dann habe ich die CSS-Stil für den div Container erstellt:

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

In meinem Fall das Bild ist 1100px Höhe und 780px Breite.

EDIT: Sie müssen das Div innerhalb der Kopf div schreiben, sonst erhalten Sie den Hintergrund nur in der 1. Seite.

Quelle

2017-06-29 15:32:13 Roke

Verwandte Themen

 Verwandte Themen