titulo - Wkhtmltopdf Caracteres en una sola línea parcialmente cortadas entre páginas

meta tags ejemplos

Question

Estoy trabajando en un proyecto usando ruby ​​on rails (3.1). Mi requisito es producir pdf a partir del contenido html. Entonces yo uso pdfkit gem.

En algunas páginas, los caracteres en una sola línea cortan parcialmente entre páginas. Cuando convierto html convert to pdf usando pdfkit gem

versión de wkhtmltopdf: wkhtmltopdf - 0.11.0 rc1

sistema operativo: Linux CentOS 5.5

En la imagen a continuación se muestra el carácter parcialmente cortado entre las páginas.

Por favor sugiere una solución.

Ejemplo 1

Ejemplo 2

Answer 1

De acuerdo con cierta documentación que encontré (consulte la página de interrupción), este es un problema conocido y sugiere utilizar saltos de página CSS para insertar saltos de página (suponiendo que esté utilizando la versión parcheada de QT):

El actual algoritmo de WebKit rompe páginas deja mucho que desear. Básicamente, webkit convertirá todo en una sola página y luego lo dividirá en páginas. Esto significa que si tiene dos columnas de texto, una se desplaza verticalmente en media línea. Entonces webkit cortará una línea en pedazos para mostrar la mitad superior en una página. Y la mitad inferior en otra página. También dividirá la imagen en dos y así sucesivamente. Si está utilizando la versión parcheada de QT, puede usar la propiedad CSS page-break-inside para remediar esto de alguna manera. No hay una solución fácil a este problema, hasta que esto se resuelva, organice sus documentos HTML de modo que contengan muchas líneas en las que las páginas se pueden cortar de forma limpia.

Ver también: http://code.google.com/p/wkhtmltopdf/issues/detail?id=9 , http://code.google.com/p/wkhtmltopdf/issues/detail?id=33 y http://code.google.com/p/wkhtmltopdf/issues/detail?id=57 .

Answer 2

El problema de corte de texto es un problema conocido de webkit y parece que los desarrolladores encontraron una solución dentro de wkhtmltopdf. La actualización a 0.12.1 solucionará el problema del corte de texto (si no quiere perder tiempo con las compilaciones, puede simplemente tomar el archivo binario desde aquí: https://github.com/h4cc/wkhtmltopdf-amd64 ).

Answer 3

En mi caso, el problema se resolvió comentando el siguiente CSS:

html, body {
overflow-x: hidden;
}

En general, compruebe si alguna etiqueta tiene un overflow establecido como hidden y quítelo o configúrelo como visible .

Por cierto, estoy usando wkhtmltopdf version 0.12.2.1 en Windows 8.

Answer 4

Me encontré con esto y encontré algo que resolvió el problema para mí. En mi caso particular, había divs con display: inline-block; margin-bottom: -20px; display: inline-block; margin-bottom: -20px; . Una vez que los cambié para bloquear y restablecer el margen inferior, la división de línea desapareció. YMMV.

Answer 5

Recorrí internet por un par de semanas, intentando superar este problema. Ninguna de las soluciones que encontré funcionó para mí, pero algo más lo hizo.

Tenía un diseño de dos columnas donde el texto se cortaba a mitad de texto. En el estado roto, mi estructura básica se veía así:

@media print {
* {
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
}
}
.col-9{
display: inline-block;
width: 70%;
}
.col-9{
display: inline-block;
width: 25%;
}
<div class="col-9">
[a lot of text here, that would spill over multiple pages]
</div>
<div class="col-3">
[a short sidebar here]
</div>

Lo arreglé cambiándolo a:

@media print {
* {
page-break-inside: avoid;
page-break-after: avoid;
page-break-before: avoid;
}
}
.col-9{
display: block;
float: left;
width: 70%;
}
.col-9{
display: block;
float: left;
width: 25%;
}
.clear{
clear: both;
}
<div class="col-9">
[a lot of text here, that no longer split mid-line.]
</div>
<div class="col-3">
[a short sidebar here]
</div>
<div class="clear"></div>

Por alguna razón, la herramienta no pudo manejar la pantalla: configuración de bloque en línea. Funciona con flotadores. Estoy ejecutando la versión 0.12.4.

Answer 6

Tuve este problema con una tabla:

Luego agregué esto a mi CSS:

table, img, blockquote {page-break-inside: avoid;}

Esto solucionó el problema: