html - salga - ¿Por qué se corta la celda de la tabla inferior que tiene el texto centrado cuando se muestra como PDF en iOS?
css texto en dos lineas (2)
Entiendo que ha sido en algún momento desde que se publicó la pregunta. Pero me intrigé con esto, y estaba tratando de averiguar por qué esto podría estar sucediendo.
También traté de probar una variedad de combinaciones para verificar esto. Pero parece que ningún código iOS nativo podría ser de ayuda. Pero, asignando una altura automática a la tabla inferior parecía hacer el trabajo. Sin embargo, establecer una altura explícita no funcionó.
table.bottom-table {
width: 1012px;
height: auto;
}
Parece que el PDF que se está renderizando podría haber tenido algún problema al configurar el marco para el PDF, en el otro caso Supongo que también sabe que el problema persistió en los modos Vertical y Horizontal, cuando la altura superó un cierto límite.
Pregunta
Tengo una aplicación para iOS que toma un archivo html, lo convierte en un PDF y lo muestra en una vista web de WebKit. Tengo un problema extraño en el que la celda de la tabla inferior se corta cuando me muestro en PDF. Lo extraño es que la tabla inferior solo se corta cuando el texto está centrado. Si está alineado a la izquierda, todo funciona bien. ¿Por qué pasó esto?
Tenga en cuenta que no estoy buscando una solución alternativa. Más bien, estoy tratando de entender por qué sucede esto. ¿Es esto un error en iOS? ¿O me perdí algo?
Visión general
En la imagen de abajo, hay dos tablas <table> . Una mesa es grande, tiene un fondo rojizo (coral) y tiene una altura de 505 píxeles. La otra tabla está debajo de la primera con un fondo blanco (la altura no está establecida). Ambos tienen algún texto. El texto está centrado para ambas tablas.
El título de la barra de navegación muestra los detalles de la vista actual. Por ejemplo, como se muestra en la imagen de abajo, un título de PDF Landscape 505 significa que la vista muestra un PDF en dimensiones de paisaje con una altura de la tabla principal de 505px.
El problema
El problema surge cuando aumento la altura en 10px. En la imagen de abajo, la altura de la mesa principal es 515px y la tabla inferior ahora está cortada.
Tome exactamente el mismo código html y css y cambie solo la alineación del texto para alinearlo a la izquierda. Ahora la mesa inferior ya no está cortada. También cambié el color de fondo a verde para la distinción. Verde significa que el texto está alineado a la izquierda. Rojo significa que el texto está centrado.
La siguiente imagen muestra una altura de la tabla principal de 745px y aún así la tabla inferior no está cortada porque está alineada a la izquierda.
Código
A continuación se muestra el código html utilizado para esta prueba.
<!DOCTYPE html>
<html>
<head>
<title>#COLOR#</title>
<meta charset="utf-8">
<style>
table, th, td {
border-collapse: collapse;
border: 3px solid black;
text-align: #ALIGN#;
}
table.main-table {
width: 1012px;
height: #HEIGHT#px;
background-color: #COLOR#;
}
table.bottom-table {
width: 1012px;
}
</style>
</head>
<body>
<table class="main-table">
<tr><td>Hello World.</td></tr>
</table>
<table class="bottom-table">
<tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr>
</table>
</body>
</html>
En MyViewController , la función getHTML() extrae la fuente html de sample.html . La función luego reemplaza #ALIGN# , #COLOR# y #HEIGHT# con sus valores respectivos.
func getHTML() -> String? {
let htmlPath: String? = Bundle.main.path(forResource: htmlResource, ofType: "html")
guard let path = htmlPath else { return nil }
do {
// Load the HTML template code into a String variable.
var html = try String(contentsOfFile: path)
html = html.replacingOccurrences(of: "#HEIGHT#", with: tableHeight.description)
html = html.replacingOccurrences(of: "#COLOR#", with: colorState.rawValue)
html = html.replacingOccurrences(of: "#ALIGN#", with: alignState.rawValue)
return html
} catch {
print("Error: " + error.localizedDescription)
}
return nil
}
La clase PDFBuilder maneja la creación de PDF con una función:
static func exportHTMLToPDF(html: String, frame: CGRect) -> Data {
// Set a printable frame and inset
let pageFrame = frame
let insetRect = pageFrame.insetBy(dx: 10.0, dy: 10.0)
// Create a UIPrintPageRenderer and set the paperRect and printableRect using above values.
let pageRenderer = UIPrintPageRenderer()
pageRenderer.setValue(pageFrame, forKey: "paperRect")
pageRenderer.setValue(insetRect, forKey: "printableRect")
// Create a printFormatter and pass the HTML code as a string.
let printFormatter = UIMarkupTextPrintFormatter(markupText: html)
// Add the printFormatter to the pageRenderer
pageRenderer.addPrintFormatter(printFormatter, startingAtPageAt: 0)
// This data var is where the PDF will be stored once created.
let data = NSMutableData()
// This is where the PDF gets drawn.
UIGraphicsBeginPDFContextToData(data, pageFrame, nil)
UIGraphicsBeginPDFPage()
pageRenderer.drawPage(at: 0, in: UIGraphicsGetPDFContextBounds())
print("bounds: " + UIGraphicsGetPDFContextBounds().debugDescription)
UIGraphicsEndPDFContext()
return data as Data
}
Este proyecto también está en Github: https://github.com/starkindustries/PrintPDFTest
Solución de problemas pasos tomados
- Dimensiones: Intenté jugar con el tamaño de las dimensiones del PDF. Esto no hizo una diferencia en el resultado.
- Columnas: intenté usar varias columnas en lugar de una sola. El mismo problema; ninguna diferencia.
- Tablas: Intenté usar solo una tabla en lugar de dos. Con una tabla y dos celdas, la celda inferior aún se corta cuando el texto está centrado; la celda inferior no se corta cuando el texto está alineado a la izquierda.
- iPhones: intenté simular en diferentes dispositivos iPhone (iPhone 6s, iPhone 8, iPad Pro). Mismo problema
- Div: Si usa un div en lugar de una segunda tabla, el problema es mágicamente solucionado. Pero ¿por qué funciona un div y no una mesa?
Notas de la aplicación
La barra de herramientas superior tiene dos botones: verde y rojo . Verde hace que el texto alineado a la izquierda. El rojo hace que el texto esté centrado.
La barra de herramientas inferior tiene cinco botones: rebobinar , html , retrato , paisaje y avance rápido . El botón de rebobinado reduce la altura de la mesa principal en 10px. Avance rápido aumenta la altura en 10px. El botón html muestra la vista html. Retrato y paisaje muestran los PDF en sus respectivas orientaciones.
Yo pienso que éste es el problema:
table, th, td {
border-collapse: collapse;
border: 3px solid black;
text-align: #ALIGN#;
}
Poner la regla en la table , y el th, td parece un problema (después de haber solucionado problemas más que unos pocos problemas de representación de pdf)
Si no es la text-align , según el comentario de DeadLock ... entonces podría ser el border-collapse que se está aplicando a la td (creo que solo necesita ir a la mesa).
Otro consejo de depuración de frontend para este tipo de cosas es:
* {border:1px solid #f00} o * {box-shadow: inset 0 0 1px #f00} (este último no se arriesga a agregar nada a las proporciones de los elementos, pero puede que no se muestre en una vista pdf) esas reglas le ayuda a ver de un vistazo lo que cada una de sus ediciones está haciendo al diseño, en lugar de tener que recurrir al inspector de elementos.
Además, asegúrese de tener una buena comprensión de cómo se representa el elemento de la tabla de forma predeterminada en ese dom.
Al declarar reglas para element y element.class es posible que hayas tirado algo. Compare el comportamiento sin estilos y luego vuelva a agregarlos uno por uno.
Tomé una oportunidad de reescribir su código:
<!DOCTYPE html>
<html>
<head>
<title>COLOR</title>
<meta charset="utf-8">
<style>
table{
border-collapse: collapse;
}
th{
}
td {
border-width:3px;
border-style:solid;
border-color:#000000;
}
tr{
text-align: center;
}
table.main-table {
width: 1012px;
height: 515px; /* There''s a lot you can do here instead of height: 515px; if needed I can elaborate. I''m guessing the content is varible-height? does flex-box make it through the pdf-generator? */
background-color: #ccc;
}
table.bottom-table {
width: 1012px;
}
</style>
</head>
<body>
<table class="main-table">
<tr><td>Hello World.</td></tr>
</table>
<table class="bottom-table">
<tr><td>This text gets cut off when centered. It does *not* get cut when left-aligned.</td></tr>
</table>
</body>
</html>
Otras preguntas:
¿Se puede inspeccionar en emulación con un depurador? O, ¿puede cambiar la forma en que se genera el pdf para mostrar errores?
¿Podrían las alturas de las filas ser porcentajes?