una - validacion de formularios con javascript ejemplos

Cómo poner un espacio en blanco encima de cada página de un HTML impreso

Question

Diseñé un informe HTML con varias div y table . Ahora mi cliente me pide que ponga un encabezado repetitivo en la parte superior de cada página impresa. Esto no es posible usando CSS y HTML simples hasta donde yo sé. Solo como prueba, coloque el elemento div del encabezado dentro de un área a la que apliqué display: table-header-group para que se muestre y coloque todos los demás elementos del informe como filas de la tabla principal pero sin éxito.

1. Una solución alternativa es usar @print { .header {position: fixed; top: 10px} } @print { .header {position: fixed; top: 10px} } para repetir el elemento .header en la parte superior de cada página. Pero para este trabajo, debemos poner un espacio en blanco en la parte superior de cada página nueva; de lo contrario, el elemento de encabezado fijo se mezcla con otros elementos en la parte superior de la tabla.

2. Como otra solución, puedo calcular la altura de los elementos en el momento del renderizado y poner los saltos de página manuales donde sea necesario. Así que quiero saber si hay alguna biblioteca Javascript disponible para ejecutar en la carga de la página y calcular todas las alturas de tiempo de renderizado de los elementos div de la página y poner un elemento div de altura cero con page-break-before: always; antes de cada div que exceda la altura de un papel A4. Supongamos que los siguientes divs dan como resultado 14, 10, 8, 9, 6, 13 y 6 centímetros de altura en el momento del renderizado. Quiero que la biblioteca coloque un elemento de inmersión ficticia de salto de página en ubicaciones específicas:

<div id="d1">...</div>

<div id="d2">...</div>

<!-- here, because 14+10+8 exceeds 30cm -->

<div id="d3">...</div>

<div id="d4">...</div>

<div id="d5">...</div>

<!-- here, because 8+9+6+13 exceeds 30cm -->

<div id="d6">...</div>

<div id="d7">...</div>

Answer 1

¿Has considerado dividir la tabla en varias páginas? He hecho esto en el pasado al medir cuán grande sería una página y luego escribir las filas en el navegador. Cada vez que se llegaba al final de una página, cerraba la tabla que se estaba escribiendo, luego comenzaba la siguiente, escribía una nueva DIV, etc. Necesita llevar un registro del tamaño máximo de cada columna, etc. a medida que avanza, pero en cuanto a la eficiencia, podríamos escribir miles de filas en la pantalla y, por lo general, regresaríamos en menos de 60 segundos para los grandes informes.

También utilicé una función de orientación de CSS solo disponible en IE en ese momento (modo de escritura: tb-rl) para imitar la página que se está representando en Paisaje y el contenido del mismo modo; requiere un poco más de reflexión sobre cómo lo está escribiendo. , PERO el contenido resultante se veía muy profesional.

Answer 2

Aquí está mi solución final. El siguiente código se ejecuta al cargar la página. Mi página estaba compuesta únicamente por varios divs. Dos divs como encabezados y los otros divs (que contienen datos tabulares) como detalles. Supuse que siempre se imprimía en esquema vertical y también asumí tamaño A4 (= ~ 21x30 cm). También asumí márgenes de 4.5 cm para la izquierda-derecha y la parte superior-inferior de la página. El código primero cambia el tamaño de los divs a un ancho compatible con el retrato (para que todas las tablas sean divs se redimensionan automáticamente). A continuación, iterar sobre elementos Div sin encabezado para agregar un salto de página cuando la altura excede la altura A4. También cloné y agregué elementos de encabezado encima de cada página a través de este código.

// page width in pixels
function pw() {
    return cm2px(16.5);
}
// page height in pixels
function ph() {
    return cm2px(25.5);
}
function px2cm(px) {
    return px * 2.54 / 96;
}
function cm2px(cm) {
    return cm * 96 / 2.54;
}

$(function() {
    $(''.section > div'').each(function(){
        $(this).width(pw() + ''px'');
    });
    hh = $(''.section > div.heading'');
    headingHeight = hh.eq(0).height() + hh.eq(1).height();

    h1 = hh.eq(0).clone();
    h2 = hh.eq(1).clone();

    var h = headingHeight;
    var pageHeight = ph();

    $(''.section > div'').not(''.heading'').each(function(){
        if (h + $(this).height() + 14 > pageHeight) {
            h1.css(''page-break-before'', ''always'');
            $(this).before(h1.clone());
            $(this).before(h2.clone());
            h = $(this).height() + 14 + headingHeight;
        } else {
            h += $(this).height() + 14;
        }
    });
});

Answer 3

Pruebe jquery para calcular las alturas de las etiquetas div. Sin embargo, la impresión de html generalmente se puede lograr mediante el uso de php simple.

También la manera más fácil podría ser crear un archivo css por separado para su página impresa y hacer que la imagen de fondo de un div sea el encabezado que desea usar para su página impresa. En su hoja de estilo regular ese mismo div podría estar vacío y no tener alto o ancho.

Este enlace es una explicación de alguna compañía sobre cómo usar css para imprimir html