Dompf作为背景的法人纸

时间:2017-06-29 11:44:54

标签: html css dompdf

我正在使用Dompdf来创建pdf发票并且工作得很好但是我需要将背景图像填满纸张(A4)。我有一个标题,内容和页脚部分,如果我把背景图像放在正文中不起作用。

我的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 canvas函数,则无关紧要。我试过了两个并且无法配置。

谢谢。

1 个答案:

答案 0 :(得分:1)

最后我得到了答案。我创建了一个div容器,其中包含一个img元素,我希望将其作为背景,如下所示:

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

然后我为div容器创建了css样式:

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

在我的情况下,图像高度为1100px,宽度为780px。

编辑:您必须在标题div中写入div,否则您将只在第1页中获得背景。