test - wkhtmltopdf pdf
Cómo evitar el salto de página dentro de la fila de la tabla para wkhtmltopdf (15)
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
¿Tienes una cabeza de tabla? y un cuerpo de mesa?
<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>
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 etiquetas <tbody> o <th> 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
Descubrí que wkhtmltopdf 0.12.2.1 en adelante ha solucionado este problema.
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;
}
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.
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/Se agregó este CSS (como se sugiere en una de las respuestas aquí):
tr, td div, th div{ page-break-inside: avoid; }Y luego también agregue las
<thead>y<tbody>como se sugiere aquí también (sin estas la tabla aún se rompería de una manera fea):<table> <thead> <tr> <th>Column 1</th> <th>Column 2</th> </tr> </thead> <tbody> <tr> <td>Value 1</td> <td>Value 2</td> </tr> </tbody> </table>
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 :)
Encontré esta solución ridícula, pero me funcionó muy bien :)
Acabo de poner una columna rowspan muy larga como esta
<td rowspan="XXX TOTAL ROWS" style="width:0px"></td>
y luego la mesa no se rompería.
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
<table>
....
<tr>
<td><div>some text</div></td>
<td><div>more text</div></td>
</tr>
....
</table>
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(''<div class="container"></div>'');
var curentDivTable;
var cDiv = $(''.container'');
tableClone.find(''tr'').each(function (i, ln) {
var line = $(ln);
if (line.hasClass(''main_row'')) {
var div = $(''<div class="new-section"><table><tbody>'')
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
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 关于wkhtmltopdf，你一定想知道这些 en consultar este sitio 关于wkhtmltopdf，你一定想知道这些 Verifique la esencia si lo desea para wkhtmltopdf
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
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; }
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í.
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).
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:
<tr>
<div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% ">
</tr>
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).
- https://code.google.com/p/wkhtmltopdf/issues/detail?id=168
- https://code.google.com/p/wkhtmltopdf/issues/detail?id=9
Actualización 08.11.2013 Hay mucha discusión sobre esto en el número 168 vinculado anteriormente. Alguien ha logrado compilar 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 compilar en Windows, pero cualquier persona interesada puede verificar, por ejemplo, el comentario here (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.