0

Estoy utilizando domPDF para generar un plan de pagos en donde imprimo una tabla para listar todos los pagos. El tamaño de la tabla es variable y por lo tanto el espacio libre debajo de la tabla también es variable. En ese espacio vació después de la tabla deben ir las firmas pero cuando es pequeño y se salta una parte de la sección de firmas. Necesito que cuando el div contenedor del área de firmas no quepa completo, se salte todo a la pagina siguiente. intento utilizar page-breake-before con distintas opciones pero no logro que salte todo el div. Alguna sugerencia?

La clase del div que deseo saltar completo:

<style>
    .salto-pagina-auto{
        page-break-before: auto;
    }
</style>

Aquí el div con el contenido que deseo saltar completo:

<div class="salto-pagina-auto">

    <div class="firmas-txt">
        <h3>Firma de conformidad</h3>
    </div>
    <div class="firmas">
    
        <div class="cliente">
            <p>
                _____________________________<br>
                <b>{{ $credito->nombre_cliente }}</b><br>
                <span style="font-style:italic">Cliente</span>
            </p>
        </div>
        <div class="aval">
            <p>
                _____________________________<br>
                <b>{{ $aval }}</b><br>
                <span style="font-style:italic">Aval</span>
            </p>
        </div>
    </div>
</div>

introducir la descripción de la imagen aquí

0

3 respuestas 3

1

No quiero utilizar :always porque siempre me generará una pagina nueva, y lo ideal es ahorrarnos una hoja de papel cuando sea posible y lo más importante, que el texto Firma de conformidad esté en la misma pagina donde están las líneas donde va la firma.

Lo solucioné utilizando page-break-inside: avoid; :

.firmas-autobreak{
        margin-top: 1cm;
        width: 100%;
        height: 4.5cm;
        text-align: center;
        page-break-inside: avoid;
}

Al div solo le agregué la clase, y se comporta exactamente como si fuera un solo bloque sólido junto con todo su contenido:

    <div class="firmas-autobreak" >
    
    <h3>Firma de conformidad</h3>
    
    <div class="firmas">
        
        <div class="cliente">
            <p>
                _____________________________<br>
                <b>{{ $credito->nombre_cliente }}</b><br>
                <span style="font-style:italic">Cliente</span>
            </p>
        </div>
        <div class="aval">
            <p>
                _____________________________<br>
                <b>{{ ($aval!=null) ? $aval : 'Sin aval' }}</b><br>
                <span style="font-style:italic">Aval</span>
            </p>
        </div>

    </div>

</div>

Aquí alcanzo a aprovechar el espacio al limite de la hoja:

Aqui alcanzo a aprovechar el espacio al limite de la hoja

Aquí ya no cabe completo el div con clase firmas-autobreak y se salta a una pagina nueva (el bloque completo que es lo que yo estaba buscando):

Aqui se salta todo el bloque a una pagina nueva

0

Leyendo tu pregunta, y si entiendo bien lo que planteas, es meter un salto de línea siempre y cuando la tabla sea lo suficientemente grande como para que no entre completamente el contenido entero de la firma.

Yo hace un tiempo me encontré con un problema similar al cargar una tabla dinámica, y lo solucioné de la siguiente manera:

Lo primero es comprobar cuantas líneas te permite añadir la tabla sin que se meta el salto de línea, y una vez sepas que te entran X número de líneas, añadir el salto de línea, de la siguiente manera:

<div style="page-break-after:always;"></div>

Luego simplemente tienes que añadir este código para añadir un salto de línea.

Casuística de que la tabla pueda añadir muchas líneas

En caso de que la consulta que hagas te pueda estar devolviendo muchas líneas, y no sepas en que momento añadir el salto de línea, podrías crear un bucle en el que vayas escribiendo todo el rato el número máximo de líneas que te entran en una hoja, y añadiendo el salto de línea antes de terminar el bucle, conseguirías un mejor resultado.

Al hacerlo de esta manera, te vas a asegurar de dos cosas:

  • En cada hoja siempre vas a tener el número máximo de líneas posibles
  • Si no te entran en una hoja todas las líneas, el apartado del div siempre estará completo en la última página
1
  • ¿ por que un voto negativo para esta respuesta ?
    – Aleman
    Commented el 15 feb. a las 7:01
-1

Para hacer salto de pagina los desarrolladores recomiendan lo siguiente:

<style>
  .page_break { page-break-before: always; }
</style>

<div>
Hola pagina 1

</div>
<div class="page_break">
Hola pagina 2
</div>
<div class="page_break">

Hola pagina 3
</div>

Solo debes cambiar auto por always en el atributo page-break-before

Lo he probado en esta herramienta y funciona 100%

2
  • Me gustaria saber por que el voto negativo. ¿que pasa en Stack Overflow en español?
    – Aleman
    Commented el 15 feb. a las 6:59
  • 1
    Ni un simple comentario y dos respuestas en negativo, supongo que habrá sido la misma persona... pero dejar un comentario yo creo que no está de más
    – Maida
    Commented el 15 feb. a las 15:08

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.