Gestión de encabezados, pies de página y saltos de página en PDF
Los saltos de página pueden resultar confusos.
La regla CSS page-break-after siempre funcionará si se aplica correctamente. Sin embargo, esta regla no funcionará si su hoja de estilo cambia un div de display:block. Asegúrese de que la regla page-break-after se aplica a un elemento a nivel de bloque, preferiblemente un div que sea hijo directo de la etiqueta body.
El siguiente ejemplo HTML muestra
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="content">
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Page Breaks with Header and Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
position: fixed;
width: 100%;
text-align: center;
background-color: #f1f1f1;
padding: 10px 0;
}
header {
top: 0;
}
footer {
bottom: 0;
}
.content {
margin: 150px 20px; /* Adjust margins to prevent content overlap with header and footer */
}
.page-break {
page-break-after: always;
display: block; /* Ensure it remains a block-level element */
}
</style>
</head>
<body>
<header>
<h1>Document Title</h1>
<p>Header Content</p>
</header>
<footer>
<p>Footer Content</p>
</footer>
<div class="content">
<div class="page-break">
<h2>Section 1</h2>
<p>This is the first section. After this section, there will be a page break.</p>
</div>
<div class="content">
<div class="page-break">
<h2>Section 2</h2>
<p>This is the second section. The header and footer continue to be displayed, and the content starts on a new page.</p>
</div>
</div>
</body>
</html>Si desea repetir encabezados y pies de tabla en cada página PDF, consulte este artículo:Añadir o evitar saltos de página en PDF HTML
Si los pasos anteriores no resuelven su problema, intente lo siguiente:
1. Simplificar la cuestión
Si su contenido varía en longitud, pruebe los contenidos de longitudes variables, para asegurarse de que está utilizando el Html/CSS correcto. Esteherramienta puede servir de ayuda.
2. Valide su HTML y CSS
Validador de CSS se puede utilizar para comprobar el estilo CSS utilizado.
Validador HTML se puede utilizar para ayudarle a validar su entrada HTML.
Además, puede pedir a su diseñador web en la comprobación de su HTML, mientras que el seguimiento de los cambios.
Por otra parte, el posicionamiento de la sección de divulgación se ve afectado por muchos factores, como la estructura de la tabla, el pie t y muchos otros. Así que comprobar dos veces la cadena y la estructura de su HTML seguramente le ayudará.
3. Compruebe el resultado en la vista previa de impresión de Chrome
IronPDF generará un PDF idéntico al del navegador web Chrome de escritorio, gracias al uso del motor de renderizado de PDF de Chrome utilizado en IronPDF.
Por lo tanto, puede comprobar el aspecto de su HTML a través de la vista previa de impresión de Chrome y ajustar el HTML en consecuencia. Esto puede requerir ensayo y error, pero es la forma más fácil de depurar su HTML.
Obtén más información sobre cómo depurar tu HTML mediante la vista previa de impresión de Chrome:Formato HTML Pixel Perfect
Consulta este artículo para obtener más información sobre Chrome PDF Rendering Engine:¿Qué es el renderizador Chrome de IronPDF?
4. Utilizar las herramientas para desarrolladores de Chrome
Como alternativa, puede utilizar Inspect en las herramientas de desarrollo de Chrome para buscar el CSS final calculado en los elementos. Esto dará más detalles sobre cada elemento HTML presente en la cadena.
5. Renderizar el HTML utilizando IronPDF
Envíe su cadena HTML finalizada o archivo HTML a IronPDF Chrome Renderer y utilice RenderHtmlAsPdf() o RenderHtmlFileAsPdf() método para crear su documento PDF.
Es posible que tenga que especificar algunas opciones de renderizado al renderizador para ajustar el PDF de salida, así como la operación de renderizado. Ver estoartículo para saber más.
