Rails: WickedPDF: Saltos de página

Question

En mi Ruby (1.9.2) Rails (3.0.x) me gustaría renderizar una página web como PDF usando wicked_pdf, y me gustaría controlar dónde están los saltos de página. Mi código CSS para controlar los saltos de página es la siguiente:

<style> 
    @media print 
    { 
    h1 {page-break-before:always} 
    } 
</style> 

Sin embargo, cuando me hacen la página con wicked_pdf, no se separa el documento en dos páginas. ¿Hay algo más que deba hacer para obtener saltos de página con wicked_pdf?

Answer 1

Por alguna razón, la "@media print" no lo hizo del todo. Acabo de ir con

.page-break { display:block; clear:both; page-break-after:always; } 

para la regla CSS, y luego me quedé lo siguiente en mi página para un salto de página:

<div class="page-break"></div> 

Eso trabajado.

Answer 2

Asegúrese de que la etiqueta de enlace de estilos incluye "impresión" o media = 'medios de comunicación = todos' si está utilizando una hoja de estilo externa:

<%= stylesheet_link_tag 'retailers_pdf',media: 'all' %> 

o

<%= stylesheet_link_tag 'retailers_pdf',media: 'print' %> 

lo contrario wicked_pdf no lo hará recójalo.

También tenga en cuenta que si se encuentra en el medio de una tabla o div con un borde, los atributos de salto de página no funcionarán. En este caso, es hora de separar jQuery y comienza a dividir las cosas. Esta respuesta: https://stackoverflow.com/a/13394466/2016616 tiene un buen fragmento para medir la posición. Estoy trabajando en un código de división de tablas limpio y repetible y lo publicaré cuando lo haya terminado.

Answer 3

tuve el mismo problema y lo que terminó trabajando para mí era asegurarse de que mi elemento con

page-break: always; 

estaba en la raíz del documento, parece cuando su anidado dentro de otros elementos, especialmente las con la altura asignada, la declaración se ignora.

Espero que esto ayude a alguien.

Answer 4

Tuve el mismo problema y descubrí algo que podría ayudar. Esta fue mi página de códigos ruptura CSS:

.page-break { 
    display: block; 
    clear: both; 
    page-break-after: always; 
} 

esto no funcionó debido a DOS razones:

I. En uno de los SASS archivo importado que tenía esta línea de código:

html, body 
    overflow-x: hidden !important 

II.El otro problema fue el arranque remoto

@import "bootstrap" 

Parece que debido a la float: left en:

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 
    float: left; 
} 

el salto de página ya no está funcionando. Por lo tanto, simplemente agregue este después de que importa el bootstrap.

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { 
    float: initial !important; 
} 

Answer 5

Probamos solución de Jay, pero no pudo conseguir que funcione (tal vez un conflicto con otra css)

lo tengo para trabajar con esto:

<p style='page-break-after:always;'></p> 

Answer 6

Ninguna de estas soluciones trabajó para yo. Encontré una solución que funcionó para muchas personas en los problemas de gemas aquí - https://github.com/wkhtmltopdf/wkhtmltopdf/issues/1524

desea agregar CSS en el elemento que necesita el salto de página. En mi caso, fueron las filas de la tabla, así que agregué:

tr { 
page-break-inside: avoid; 
}