Cómo evitar el salto de página dentro de la fila de la tabla para wkhtmltopdf

Estoy generando informe pdf desde la página html con una tabla .

Estoy usando wkhtmltopdf para este propósito.

cuando se genera el PDF, se rompe en cualquier lugar en la etiqueta tr .

Quiero evitarlo

    Actualización 17.09.2015: compruebe la versión que está utilizando: se dice que wkhtmltopdf 0.12.2.4 soluciona el problema (no lo he comprobado) .


    Este es un problema conocido en wkhtmltopdf. El algoritmo de salto de página utilizado por webkit (el WK en WKhtmltopdf) realmente no funciona bien para tablas grandes. Sugiero dividir la tabla en pedazos más pequeños que se dividen más fácilmente en páginas y usan mucho el CSS:

    table, tr, td, th, tbody, thead, tfoot { page-break-inside: avoid !important; } 

    También eche un vistazo a los siguientes problemas wkhtmltopdf, tienen interesantes comentarios que discuten, por ejemplo, el problema de división de tablas. Hay una solución de JS que divide las tablas de manera programática en 168 que podrían ayudarte (aunque yo no la uso).

    Actualización 08.11.2013 Hay mucha discusión sobre esto en el número 168 vinculado anteriormente. Alguien ha logrado comstackr una versión de wkhtmltopdf que admite una mejor tabla de partición, pero desafortunadamente parece que no se ha lanzado oficialmente y podría contener otros errores. No sé cómo obtenerlo y no sé cómo comstackr en Windows, pero cualquier persona interesada puede verificar, por ejemplo, el comentario aquí (ver la nueva actualización a continuación).

    Actualización 24.02.2014 Le complacerá escuchar que en wkhtmltopdf 0.12 esta característica, entre otras, ha mejorado mucho. Sin embargo, espere 0.12.1 y pruebe a fondo antes de comenzar a utilizar cualquier versión nueva, todavía es un poco inestable, aunque los nuevos chicos que trabajan con antialize están haciendo un gran trabajo (¡rocas de ashkulz)! Manténgase actualizado en wkhtmltopdf.org y github . El sitio del código de google es obsoleto y migra lentamente.

    Es una publicación antigua, pero como estaba perdiendo mucho tiempo tratando de encontrar la solución adecuada, la pondré aquí, tal vez sea útil para alguien.

    Entonces, por lo que leí, el problema con

     page-break-inside: avoid 

    es que no funciona. Pero en realidad si lo configura en un elemento que tiene display:block funciona como se espera (como se observa en algún lugar en SO). por lo que para la estructura simple de la mesa css con

     td div, th div{ page-break-inside: avoid; } 

    y estructura de la mesa

      ....  .... 
    some text
    more text

    funcionará como se espera

    Tenía un caso un poco más complicado con rowspans, por lo que la solución de arriba fue romperlo en paces, que no era el efecto deseado. Lo resolví usando divs para cada conjunto de líneas con formato de filas. Mi jquery js haciendo todo el trabajo:

     $(window).load(function () { var sizes = {}; $('#the_table tr:first th').each(function (a, td) { var w = $(td).width(); if (sizes.hasOwnProperty('' + a)) { if (sizes['' + a] < w) sizes['' + a] = w; } else { sizes['' + a] = w; } }); var tableClone = $('#the_table').clone(); $('#the_table').replaceWith('
    '); var curentDivTable; var cDiv = $('.container'); tableClone.find('tr').each(function (i, ln) { var line = $(ln); if (line.hasClass('main_row')) { var div = $('
    ') currentDivTable = div.find('tbody'); cDiv.append(div); } currentDivTable.append(line); }); //optional - maybe in % its better than px var sum = 0; $.each(sizes, function (a, b) { sum += b; }); var widths = {}; $.each(sizes, function (a, b) { var p = Math.ceil(b * 100 / sum); widths['' + a] = p + '%'; }); //setup $('.container table').each(function (a, tbl) { $(tbl).find('tr:first td, tr:first th').each(function (b, td) { $(td).width(widths['' + b]); }); $(tbl).addClass('fixed'); }); });

    css:

     div.new-section { page-break-inside: avoid; } .container, .new-section, .new-section table.fixed{ width: 100%; } .new-section table.fixed{ table-layout:fixed; } 

    No sé si todo es necesario y no creo que sea perfecto, pero cumple su función. Probado solo en cromo

    Desde 0.12 este problema se ha resuelto pero, a veces, cuando una tabla es demasiado larga para caber en la página, wkhtmltopdf la divide en dos partes y repite los encabezados de columna en la página nueva y estos encabezados de columna aparecen superpuestos a la primera fila.

    Encontré una solución temporal a este problema en la sección de problemas wkhtmltopdf github: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

    Solo agrega estas líneas a tu vista css:

     tr { page-break-inside: avoid; } 

    Descubrí que wkhtmltopdf 0.12.2.1 en adelante ha solucionado este problema.

    En mi caso particular, por alguna razón, ninguna de las respuestas anteriores funcionó para mí. Lo que terminó funcionando fue en realidad una combinación de varias cosas.

    1. Instalé (en Ubuntu 16.04) el wrapper python Wkhtmltopdf llamado pdfkit usando pip3, y luego en lugar de instalar Wkhtmltopdf vía apt-get instalé el binario estático (versión 0.12.3) siguiendo el siguiente script, tomado de aquí

       #!/bin/sh sudo apt-get install -y openssl build-essential xorg libssl-dev wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz cd wkhtmltox sudo chown root:root bin/wkhtmltopdf sudo cp -r * /usr/ 
    2. Se agregó este CSS (como se sugiere en una de las respuestas aquí):

       tr, td div, th div{ page-break-inside: avoid; } 
    3. Y luego también agregue las

      y

      como se sugiere aquí también (sin estas la tabla aún se rompería de una manera fea):

       
      Column 1 Column 2
      Value 1 Value 2

    Con estas modificaciones ahora puedo usar con éxito las plantillas de Mako para generar el HTML y luego alimentarlo con Wkhtmltopdf y obtener un PDF bellamente paginado 🙂

    Probé todo tipo de manipulaciones en mis tablas, pero nada de lo que probé pudo evitar que los saltos de página se pusieran en el medio de una fila. Desesperado, probé diferentes versiones y encontré lo siguiente:

    Wkhtmltopdf 0.12.2.1: Malo

    Wkhtmltopdf 0.12.3: Malo

    Wkhtmltopdf 0.12.1: Bueno

    Mi solución fue bajar a la versión 0.12.1, lo que resolvió mis problemas. Por supuesto, pueden deberse en parte a que no son súper TOC sobre mi html, pero como HTML se genera dentro de TinyMCE (por los usuarios) no tengo muchas opciones.

    Además, las tablas anidadas no funcionan en ninguna versión para mí.

    ¿Cómo usar saltos de página en pdf sin romper un tr?

    Aquí hay una solución que puede usar en cualquier archivo html …..

    Después de comenzar tu tr tienes que tomar un div dentro del tr y darle este css al div:

      

    ¿Tienes una cabeza de tabla? y un cuerpo de mesa?

     
    NameValue
    urlstackoverflow.com
    ip123.123.123.123

    Ese es el formato correcto de una tabla, mientras que a la mayoría de los navegadores no les puede importar menos, los convertidores como el que mencionas pueden, si tus tags

    o

    te sugiero que intentes agregarlas primero.

    Con la adición a lo que dice Nanotelep, aquí está la implementación operativa del algoritmo manual para romper páginas. https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack

    Las respuestas anteriores no me funcionaron. Tenía que desactivar específicamente la opción de zoom mi configuración de pdfkit.

     PDFKit.configure do |config| config.default_options = { print_media_type: false, page_size: "A4", encoding: "UTF-8", ## Make sure the zoom option is not enabled! ## zoom: '1.3', disable_smart_shrinking: false, footer_right: "Page [page] of [toPage]" } end 

    Para cualquiera que todavía tenga problemas con esto, una cosa para recordar es que la mesa tiene que ser un hijo directo del cuerpo , de lo contrario el CSS no funcionará (al menos eso es lo que sucedió conmigo).

    Encontré esta solución ridícula, pero me funcionó muy bien 🙂

    Acabo de poner una columna rowspan muy larga como esta

      

    y luego la mesa no se rompería.

    Otra opción: coloque cada tr en su propio tbody y luego aplique las reglas de peage break css al tbody . Las tablas admiten múltiples tbody s.

    Un poco de marcado adicional, pero funciona decentemente para mí.

    Me enfrentaba al mismo problema agregar después de un montón de errores de prueba n este CSS resolvió el problema

    tr { display: inline-table; }

    Indagué en estos problemas por días y finalmente encontré la solución perfecta. Puede hacer referencia a este proyecto phpwkhtmltopdf . Mire en el article del directorio y encontrará 3 soluciones para 3 problemas. En resumen, la solución definitiva es agregar el estilo CSS

     thead { display: table-row-group; } tr { page-break-before: always; page-break-after: always; page-break-inside: avoid; } table { word-wrap: break-word; } table td { word-break: break-all; } 

    Si eres chino, no dudes en consultar este sitio 关于 wkhtmltopdf, 你 一定 想 知道 这些 Verifique la esencia si lo desea para wkhtmltopdf

    Resolví el problema usando una combinación de algunas soluciones sugeridas.

    Envolví mi mesa en un div y definí el siguiente CSS.

     .wrapping-div { display: block; page-break-inside: avoid !important; } .wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th { page-break-inside: avoid !important; } 

    La estructura de la tabla cuando se terminó se definió como el siguiente ejemplo:

     
    header content

    No necesité crear ningún div dentro de las tags td o th.

    Cosas importantes que noté al tratar de resolver el problema:

    • El tbody debe incluirse en la tabla
    • El div debe tener visualización: bloque
    • Cuando una tabla no cabe en una página, moverá automáticamente toda la tabla a la página siguiente (no he probado esta con tablas enormes)
    • Si elimina solo el selector “.wrapping-div table” del CSS, permitirá que la tabla se divida en dos páginas, pero se procesará correctamente, sin dividir una celda en dos páginas (es como el comportamiento predeterminado en Word) )

    Espero que esto ayude.

    He luchado mucho con el problema, utilizando la última versión de h4cc / wkhtmltopdf-amd64 0.12.4 y finalmente lo he hecho degradando la versión del paquete a 0.12.3 .