javascript - google - Imprimir encabezados de página repetidos en Chrome

google script examples html (5)

De acuerdo, no hay problema con esto, así que con unos días más de mirar alrededor y elegir no escribir mi propia solución, esto es lo que encontré.

En la parte inferior de una publicación de Stack, sin votos ni comentarios, se encuentra este pequeño y solitario enlace: http://welcome.totheinter.net/columnizer-jquery-plugin/#comment-53243

Esto es increíble, está diseñado para manejar amplias páginas de contenido y formatearlas en columnas como un periódico. Maneja los saltos de página especialmente bien y es bastante flexible.

En mi caso, necesitaba una sola columna (ancho de la página) y repetir encabezados y pies de página. Usé el Ejemplo 10 como mi base: http://welcome.totheinter.net/autocolumn/sample10.html

Simplemente agregué el enlace al complemento, cambié los ID y las clases necesarias para que se ajustaran a mi página, e hice algunos cambios menores de CSS en alturas y anchos, ¡y pude imprimir contenido de varias páginas con encabezados y pies de página repetidos en Google Chrome! (el navegador preferido de mi empresa)

CONSEJOS:

En un pequeño truco de CSS, hice el conjunto de contenidos de MIN-HEIGHT para que empujara el pie de página hacia abajo en páginas cortas. (No hagas esto si quieres que el usuario tenga la opción de retrato o paisaje). Mi impresión final está arreglada, así que esto fue genial para mí.
Probé diferentes alturas en el contenido para ver cómo rompe el contenido, siempre fue suave.

Intenté publicar mi último ejemplo en JsBin y Fiddle, pero cada vez corría un error.

Entonces, nuevamente, el Ejemplo 10 de arriba es un excelente lugar para comenzar, ya que se muestra antes y después.

Aquí está mi final con contenido de altura variable y repetición de encabezados y pies de página: (esta es la vista cuando hago clic en el botón Imprimir enlace / botón en Chrome)

ACTUALIZACIÓN 7/2014: Una vez más, Chrome es la ruina de mi existencia con problemas de impresión. Vi el comentario a continuación sobre el enlace que proporcioné. Tiene razón, se reproduce correctamente, pero la vista de impresión es incorrecta. Lo siento por eso, pero sigue siendo un buen ejemplo para jugar para aprender la configuración.

Todavía estoy usando esta solución, funciona, pero tienes que ajustar el CSS y la JS var para el tamaño del contenido del cuerpo. Las combinaciones de tamaño son MUY sensibles, pero cuando se obtiene el ancho / ancho de página correcto y el tamaño del contenido correcto, funciona. Tuve que escribir funciones separadas para tamaños de papel legal / carta. Es limitado pero funciona para nuestros propósitos.

También noté que, dependiendo del tamaño de mi ventana, no siempre se veía bien, pero el producto final IMPRIMIDO fue como se esperaba con los encabezados y pies de página repetidos, así que utilicé una ventana que se imprimió de manera directa para que el usuario no notara el resultado , sino más bien vio el renderizado en chrome print. Odio este tipo de solución, pero con todos en mi oficina usando Chrome, es un mal necesario.

¿Alguien tiene un enlace a un artículo o un ejemplo práctico de repetición de encabezados / pies de página de Chrome específicamente?

Fondo:
He pasado días sin esto, hay varias soluciones propuestas para la pila, pero ninguna parece funcionar (en Chrome). Ya que usamos Chrome en el trabajo, solo lo he probado allí, así que muchos de estos a continuación dicen que Chrome simplemente no puede hacerlo, ¿pero tal vez pasé por alto algo?

Probé estos enlaces de pila (... y muchos más):

Imprima pie de página en cada página impresa desde el sitio web, en todos los navegadores (Chrome)

¿Hay alguna manera de obtener un encabezado / pie de página web impreso en cada página?

¿Cómo utilizar HTML para imprimir el encabezado y el pie de página en cada página impresa de un documento?

Creación de encabezados y pies de página usando CSS para imprimir

Si no puedo, use encabezados / pies de página repetidos ... entonces mi siguiente idea es contar mis filas en mi objeto de clonación y hacer que se rompa en un número máximo, crear una nueva página (altura forzada) y comenzar el ciclo nuevamente. Otra página en otra div.

Realmente aprecio cualquier sugerencia sobre cómo ejecutar la solución de encabezado / pie de página, ya que el punto principal de mi aplicación fue la propuesta impresa terminada.

Desafortunadamente, es un error conocido de webkit (Chrome y Safari) - vea aquí . He intentado encontrar una solución varias veces, pero sin suerte.

El ejemplo vinculado a la respuesta aceptada no parece funcionar cuando imprime desde el navegador.

Es posible que esta no sea una respuesta directa a su pregunta, sino tal vez la solución directa a su problema.

Después de varios días y semanas de cómo resolver este problema, finalmente he dejado de usar la impresión directa de html / css en encabezados / pies de página que se repiten. He visto muchos códigos y muestras, pero cada uno de ellos no satisface exactamente mis necesidades, siempre falta o no imprime de forma correcta.

La solución a la que me parece aceptable es una combinación de html simple, css simple y conversión de este a pdf. Te sorprenderá lo simple que es la estructura html y css.

Esta solución no es totalmente mía, sino una combinación de los códigos anteriores y la biblioteca wkhtmltopdf. Por favor, no se asuste, esto es muy fácil de instalar, esto es lo que usé exactamente Windows (MSVC 2013) Versión 0.12.2.1, tengo un Windows 7 de 64 bits con xampp como mi pila. Puede seguir este tutorial sobre cómo instalar wkhtmltopdf

Después de la instalación debería poder producir este código.

<?php // Test correct and failed output // shell_exec(''c:/wkhtmltopdf/bin/wkhtmltopdf --asdasdsadsad 2>> err1.txt 1>> out1.txt''); shell_exec(''c:/wkhtmltopdf/bin/wkhtmltopdf --orientation Landscape C:/xampp/htdocs/test/Template.html google.pdf''); ?> <html> <head> </head> <body> <p>Magical ponies!</p> </body> </html>

El contenido de Template.html que ves en php shell_exec () está a continuación. Permítanme explicar rápidamente cuáles son estos parámetros:

c: / wkhtmltopdf / bin / wkhtmltopdf - Aquí es donde instaló el wkhtmltopdf, la ubicación es suya para decidir, pero para hacerla accesible, utilicé la unidad C: exactamente como en el tutorial.
--orientación horizontal - Estos son uno de los parámetros opcionales de mayo, puede consultar su documento oficial para conocer más cosas que puede hacer con la configuración.
C: / xampp / htdocs / test / Template.html: esta es la ubicación del archivo html que desea convertir. Desafortunadamente, no puede alimentar directamente una cadena html.
google.pdf: nombre y ubicación del archivo generado.

<!DOCTYPE html> <html> <head> <style> a{ color: black; text-decoration: none; } a:hover{ cursor: inherit; } #main-report{ width: 100%; } table { color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse; border-spacing: 0; } td, th { border: 1px solid transparent; /* No more visible border */ height: 30px; font-size: 11px; } th { background: #DFDFDF; /* Darken header a bit */ font-weight: bold; } td { background: #FAFAFA; text-align: center; } /* Cells in even rows (2,4,6...) are one color */ tr:nth-child(even) td { background: #F1F1F1; } /* Cells in odd rows (1,3,5...) are another (excludes header cells) */ tr:nth-child(odd) td { background: #FEFEFE; } table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; } </style> </head> <body> <table id="main-report"> <thead> <tr> <th colspan="9">Inventory</th> <th colspan="8">Inspection Report</th> </tr> <tr> <th rowspan="2">Description</th> <th rowspan="2">Serial No.</th> <th rowspan="2">Qty</th> <th rowspan="2">Unit Cost</th> <th rowspan="2">Total Cost</th> <th rowspan="2">Property No.</th> <th rowspan="2">Date Acquired</th> <th rowspan="2">Years in Service</th> <th rowspan="2">Accumulated Depreciation</th> <th colspan="5">Disposition</th> <th rowspan="2">Appraisal 14</th> <th rowspan="2">OR No.</th> <th rowspan="2">Amount</th> </tr> <tr> <th>9</th> <th>10</th> <th>11</th> <th>12</th> <th>13</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000001</td> <td>11/03/2000</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000002</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000003</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td>SN00001</td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000004</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000005</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000006</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td>faksdjfh skdjh h lsdjl ksd <br/> asdfjdhsfljshdfjksahdf <br/> jsdhfjsadhfjsahfkjsdhkjh</td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000007</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000008</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000009</td> <td>11/03/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000010</td> <td>11/04/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td>1</td> <td>60,000.00</td> <td>60,000.00</td> <td>000011</td> <td>11/04/2015</td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> <script> </script> </body></html>

Aquí esta el resultado final

[1]:

Yo uso printThis para resolver el problema. Debe especificar el ID del área de impresión o el nombre de la clase.

La respuesta a esta pregunta depende de la estructura de su documento. Si se puede estructurar como una serie de secciones cortas e irrompibles, ¡entonces estás de suerte! Existe una manera compatible con Chrome de simular encabezados de página en ejecución en este tipo de documento (en realidad, funciona en todos los navegadores de escritorio populares).

La idea básica es colocar una copia del encabezado en la parte superior de cada sección irrompible y luego usar un margen negativo para ocultar la copia de modo que solo se vea si un salto de página golpea la sección de la página siguiente. Sin embargo, es un poco simplista, así que recomendaría estudiar el código a continuación antes de intentarlo en sus propios documentos.

Prueba doc:

<!DOCTYPE html> <html> <head> <style> .section { display: table; width: 100%; } .section > div { display: table-cell; overflow: hidden; } .section ~ .section > div:before { content: ""; display: block; margin-bottom: -2.5em; /* inverse of header height */ } .section > div > div { page-break-inside: avoid; display: inline-block; width: 100%; vertical-align: top; } .header { height: 2.5em; /* header must have a fixed height */ } .content { /* this rule set just adds space between sections and is not required */ margin-bottom: 1.25em; } </style> </head> <body> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> <div class="section"> <div> <div> <div class="header"> PAGE HEADER </div> <div class="content"> Unbreakable section.<br/>Unbreakable section.<br/>Unbreakable section.<br/> Unbreakable section.<br/>Unbreakable section. </div> </div> </div> </div> </body> </html>

No querría usar esta técnica en documentos que tienen bloques de texto más grandes que aproximadamente 1/3 de una página, pero funciona bien para documentos que consisten en secciones pequeñas y discretas, como formularios y tablas.

Mi respuesta a este otro post también podría ser de interés. Muestra cómo crear encabezados de tabla repetidos compatibles con Chrome utilizando los mismos principios básicos, pero todo el margen de beneficio adicional se agrega a través de javascript para que no "contamine" el documento HTML original.