ruby on rails - example - Rails: WickedPDF: Saltos de página

wicked pdf español

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 el siguiente:

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

Sin embargo, cuando renderizo la página con wicked_pdf , no 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

Asegúrese de que la etiqueta de enlace de la hoja de estilo incluya media = ''print'' o media = ''all'' si está usando una hoja de estilo externa:

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

o

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

de lo contrario, wicked_pdf no lo recogerá.

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 romper jQuery y comenzar a dividir las cosas. Esta respuesta: https://.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 2

Intenté la solución de Jay pero no pude hacerlo funcionar (tal vez un conflicto con otras CSS)

Lo tengo para trabajar con esto:

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

Answer 3

Ninguna de estas soluciones funcionó para mí. 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;
}

Answer 4

Por alguna razón, el "@media print" no lo hizo del todo. Solo fui con

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

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

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

Eso solo funcionó.

Answer 5

Tuve el mismo problema y descubrí algo que podría ayudar. Este fue mi código CSS de salto de página:

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

Esto no funcionó por DOS razones:

I. En uno de los archivos importados SASS tenía esta línea de código:

html, body
  overflow-x: hidden !important

II. El otro problema fue bootstrap

@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 funciona. Por lo tanto, solo agregue esto después de importar el arranque.

.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 6

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

page-break: always;

estaba en la raíz del documento, parece que cuando se anida dentro de otros elementos, especialmente los que tienen una altura asignada, la declaración se ignora.

Espero que esto ayude a alguien.