1

Alguien sabe de alguna función en javascript para que al momento de hacer una impresión o guardado en pdf el header y el footer se repitan en todas las hojas que se lleguen a crear? tengo el siguiente header y quiero que se repita en todas las hojas que se vayan creando

    <header>
        <div class="card-group">
            <div class="card" style="width: 70%; border: 0 !important;">      
                <div class="card-body">
                    <img src="./images/unnamed.png">
                    <p class="card-text" style="font-size: 12px;">
                        EZEQUIEL MONTES 38 SUR, COLONIA CENTRO HISTORICO, QUERETARO, QUERETARO, C.P. 76000
                    </p>
                    <div class="row">
                        <div class="col">
                            <p class="card-text" style="font-size: 12px;">
                                Tels. Tels. (442) 2 24 30 07 y (442) 962 78 88
                            </p>
                        </div>
                        <div class="col">
                            <p class="card-text" style="font-size: 12px;">
                                www.siivasa.com
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card1" style="width: 30%;">
                <div class="card-content">
                    <div class="card-body">
                        <table style="background: #D3D3D3D3; width: 80%; border: 2px solid grey !important;margin-left: 31px;">
                            <thead id="res">
                                <tr><td>Folio Avax:</td></tr>
                                <tr><td>Folio Infonavit:</td></tr>
                                <tr><td>Clave unica de vivienda:</td></tr>
                                <tr><td>Folio Unico:</td></tr>
                            </thead>
                            <tbody>
                                <label></label>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </header>
```
hasta ahorita lo único que se me ocurrió fue ponerlo harkcodeado en todas las partes donde segun yo deben de estar luego encontre la siguiente funcion con js para acomodarlo pero no pude
```
    var pageHeight = parseInt($('body').css('height'))
    var offsetHeight=1230;
    for(var i=0;i<pageHeight;i++){
        if(i%offsetHeight==0 || i==0){
            $('body').append('<div style="position: absolute;top:'+i+';">your header</div>')
        }
    }

solo lo sobrepone arriba de lo demás como se ve en la siguiente imagen introducir la descripción de la imagen aquí

y necesito que se muestre hasta arriba y después repetirlo en todas las paginas que se vallan creando en el pdf

0

1 respuesta 1

2

No necesitas código de JS para lograr el objetivo deseado, basta con que a tu footer le apliques lo siguiente:

footer {
    position: fixed;
    bottom: 0;
    //aqui el resto de tus estilos
}

Y a tu header lo siguiente:

header {
    position: fixed;
    top: 0;
    //los demás estilos
}
  • Lo anterior generará que el footer esté presente en cada página que se imprima en un posible PDF

Según la documentación de Mozilla developer para posicionamiento fixed cito1:

El elemento es removido del flujo normal del documento, sin crearse espacio alguno para el elemento en el esquema de la página. Es posicionado con relación al bloque contenedor inicial establecido por el viewport, excepto cuando uno de sus ancestros tiene una propiedad transform, perspective, o filter establecida en algo que no sea none (ver CSS Transforms Spec), en cuyo caso ese ancestro se comporta como el bloque contenedor. (Notar que hay inconsistencias del navegador con perspective y filter contribuyendo a la formación del bloque contenedor.) Su posición final es determinada por los valores de top, right, bottom, y left.

Y quizás el punto mas importante viene al final:

Estos valores siempre crean un nuevo contexto de apilamiento. En documentos impresos, el elemento se coloca en la misma posición en cada página.

Referencias

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.