TongoRender — HTML to PDF, Image & Screenshot API for Developers

Los PDFs de una sola página son sencillos, pero los documentos del mundo real — contratos, reportes, manuales, catálogos — abarcan decenas o incluso cientos de páginas. Gestionar saltos de página, mantener encabezados y pies de página consistentes, y agregar números de página requiere un sólido entendimiento de estilos CSS de impresión y funcionalidades de APIs de PDF.

Reglas de Salto de Página CSS

Forzar Saltos de Página

/* Iniciar cada capítulo en una nueva página */
.chapter { break-before: page; }

/* Sintaxis legacy alternativa */
.chapter { page-break-before: always; }

/* Forzar un salto después del índice */
.toc { break-after: page; }

Prevenir Saltos No Deseados

/* Mantener encabezados con su contenido siguiente */
h2, h3 { break-after: avoid; }

/* No romper dentro de tarjetas, figuras o filas de tabla */
.card, figure, tr { break-inside: avoid; }

/* Mantener al menos 3 líneas antes/después de un salto */
p { widows: 3; orphans: 3; }

Saltos Específicos de Tablas

/* El navegador repetirá el thead en cada página */
table { width: 100%; border-collapse: collapse; }
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
tr { break-inside: avoid; }

Encabezados y Pies de Página con TongoRender

const response = await fetch('https://api.tongorender.io/v1/pdf', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-API-Key': process.env.TONGORENDER_API_KEY,
  },
  body: JSON.stringify({
    html: documentHtml,
    format: 'A4',
    margin: { top: '25mm', bottom: '20mm', left: '15mm', right: '15mm' },
    displayHeaderFooter: true,
    headerTemplate: `
      <div style="font-size:9px; color:#666; width:100%; padding:0 15mm; display:flex; justify-content:space-between;">
        <span>Acme Corp — Confidencial</span>
        <span>Informe Anual 2026</span>
      </div>
    `,
    footerTemplate: `
      <div style="font-size:9px; color:#666; width:100%; padding:0 15mm; display:flex; justify-content:space-between;">
        <span>Generado el 2026-03-15</span>
        <span>Página <span class="pageNumber"></span> de <span class="totalPages"></span></span>
      </div>
    `,
  }),
});

Variables de Plantilla Integradas

pageNumber — Número de página actual
totalPages — Número total de páginas
date — Fecha de impresión formateada
title — Título del documento del <title>

Ejemplo Completo de Documento Multi-Página

function buildReport(data) {
  return `
  <!DOCTYPE html>
  <html lang="es">
  <head>
    <style>
      body { font-family: 'Georgia', serif; color: #333; line-height: 1.6; padding: 30px; }
      .cover { height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; break-after: page; }
      .cover h1 { font-size: 36pt; color: #1a1a2e; }
      .toc { break-after: page; }
      .chapter { break-before: page; }
      h2 { color: #1a1a2e; border-bottom: 2px solid #e2e8f0; break-after: avoid; }
      table { width: 100%; border-collapse: collapse; }
      thead { display: table-header-group; background: #1a1a2e; color: white; }
      tr { break-inside: avoid; }
      p { orphans: 3; widows: 3; }
    </style>
  </head>
  <body>
    <div class="cover">
      <h1>${data.title}</h1>
      <div>${data.subtitle}</div>
    </div>

    <div class="toc">
      <h2>Índice</h2>
      ${data.chapters.map((ch, i) => \`<div>${i + 1}. ${ch.title}</div>\`).join('')}
    </div>

    ${data.chapters.map(ch => \`
      <div class="chapter"><h2>${ch.title}</h2>${ch.content}</div>
    \`).join('')}
  </body>
  </html>`;
}

Errores Comunes

Márgenes muy pequeños para encabezados/pies de página — Los márgenes superior e inferior deben ser lo suficientemente grandes para contener las plantillas.
Olvidar display: table-header-group — Sin esto, los encabezados de tabla no se repiten en las páginas siguientes.
Usar position: fixed para encabezados — El posicionamiento fijo no funciona para encabezados repetidos en impresión.
Colores de fondo que no se imprimen — Establece printBackground: true.
Ignorar huérfanas y viudas — Una sola línea de un párrafo aislada al inicio o final de una página se ve poco profesional.

Con estilos CSS de impresión adecuados y el soporte de encabezado/pie de página de TongoRender, puedes generar documentos multi-página profesionales.

Genera PDFs multi-página con TongoRender — 100 renderizaciones gratuitas al mes, sin necesidad de tarjeta de crédito.