Encontrará el artículo perfecto en línea y lo guardará como PDF utilizando la función de impresión del navegador. El PDF resultante no se parece en nada a la página web que estabas leyendo. Faltan imágenes. El texto se superpone. El diseño que estaba limpio y legible en la pantalla es un desastre en la página PDF. La conversión del navegador Web a PDF es conveniente pero imprecisa y produce resultados que se aproximan, en lugar de replicar, a la página web original.
Las funciones de impresión a PDF del navegador utilizan la hoja de estilos CSS de impresión de la página web, no el CSS de la pantalla. Los desarrolladores web suelen crear un diseño simplificado específicamente para impresión que elimina la navegación, las barras laterales y los anuncios. Este diseño de impresión puede verse dramáticamente diferente de lo que ve en la pantalla. La diferencia es intencionada y está diseñada para producir resultados impresos más limpios, pero puede resultar sorprendente.
Por qué la salida de impresión del navegador difiere de la visualización en pantalla
Las páginas web utilizan dos hojas de estilo CSS independientes: una para visualización en pantalla y otra para impresión. La hoja de estilo de la pantalla controla lo que ves en el navegador. La hoja de estilo de impresión controla lo que aparece cuando imprime o guarda como PDF. Las dos hojas de estilo pueden especificar diseños, fuentes, colores e incluso contenido completamente diferentes.
La conversión PDF Format también elimina elementos interactivos. Los menús desplegables, el contenido con pestañas, los carruseles y las secciones de acordeón que requieren hacer clic o pasar el cursor para revelar el contenido producen resultados en PDF incompletos. El PDF captura sólo el estado actualmente visible de estos elementos, que puede ser su estado colapsado u oculto.
La hoja de estilo de impresión explica la mayoría de las sorpresas.
La hoja de estilo de impresión es el principal culpable de la mayoría de las sorpresas en el diseño.
Es posible que el contenido dinámico cargado por JavaScript después de la carga inicial de la página no aparezca en el PDF. Las páginas de desplazamiento infinito, las imágenes cargadas de forma diferida y el contenido que requiere la interacción del usuario para cargarse son particularmente vulnerables. El navegador imprime lo que está actualmente cargado en el DOM, que puede ser sólo una fracción del contenido total de la página.
Problemas comunes de impresión y cómo solucionarlos
Las imágenes que faltan en la salida PDF generalmente se deben a que la hoja de estilo de impresión oculta imágenes para ahorrar tinta, o a imágenes cargadas de forma diferida que no se habían cargado cuando se inició la impresión. Desplácese por toda la página para activar la carga diferida antes de imprimir. Deshabilite la hoja de estilos de impresión en las herramientas de desarrollo del navegador para forzar el uso del diseño de pantalla para la impresión.
WukongPDF puede procesar la salida resultante Visualización de PDF para ajustar las dimensiones de la página y eliminar elementos no deseados, pero no puede restaurar el contenido que el navegador omitió durante la captura de impresión.
Uso del modo Lector para una salida PDF más limpia
La mayoría de los navegadores incluyen un modo lector que extrae el contenido principal y lo muestra en un formato limpio de una sola columna. Active el modo lector antes de imprimir en PDF. La salida del modo lector es más simple que la página web completa pero más confiable, con un flujo de texto consistente y sin contenido faltante.
Herramientas dedicadas de página web a PDF frente a impresión con navegador
Las herramientas de captura de páginas web dedicadas producen resultados PDF más confiables que las funciones de impresión del navegador. Estas herramientas muestran la página por completo, esperan a que se cargue todo el contenido y capturan el diseño de la pantalla en lugar del diseño de impresión. El resultado se asemeja más a lo que ve en la pantalla.
Las páginas web que deben capturarse con precisión como archivos PDF, pruebe tanto la función de impresión del navegador como una herramienta de captura dedicada. Compara la salida. La herramienta que produce el mejor resultado para una página web puede no ser la mejor para otra. La variabilidad del diseño de páginas web significa que ningún método funciona perfectamente para todas las páginas.
Tratamiento de contenido web de varias páginas
Los artículos largos que abarcan varias páginas impresas en el formato PDF suelen tener saltos de página incómodos que cortan imágenes o dividen párrafos a mitad de frase. El algoritmo de paginación del navegador no comprende los límites del contenido. Divide las páginas en posiciones fijas según el tamaño del papel.
Utilice la vista previa de impresión del navegador para identificar dónde se producirán los saltos de página. Ajuste la escala de impresión, los márgenes o el tamaño del papel para mover los saltos de página a posiciones más naturales. Una ligera reducción en la escala, del 100 por ciento al 95 por ciento, puede cambiar los saltos de página lo suficiente como para evitar las peores divisiones de contenido.
Para artículos que están divididos en muchas páginas PDF, considere usar un editor de PDF después de la captura para combinar contenido fragmentado. Recorte imágenes de páginas individuales y vuelva a ensamblarlas en un documento continuo que fluya de manera más natural que los saltos de página impuestos por el navegador.
Preservar el contenido interactivo y dinámico
Las páginas web con vídeo, audio o gráficos interactivos incrustados pierden estos elementos en la salida PDF. El PDF captura una imagen estática del estado actual. Para contenido donde el elemento interactivo es esencial, incluya la URL de la página web original en el PDF para que los lectores puedan acceder a la versión interactiva completa.
Es posible que no se pueda hacer clic en los enlaces del PDF capturado. La función de impresión del navegador a veces convierte texto en contornos vectoriales o imágenes rasterizadas que no conservan los hipervínculos. Pruebe la salida del PDF haciendo clic en un enlace conocido para verificar la funcionalidad del enlace. Si se pierden enlaces, utilice un editor de PDF para volver a agregarlos manualmente.
Las incrustaciones de redes sociales, las secciones de comentarios y el contenido relacionado cargado dinámicamente rara vez sobreviven al proceso de impresión a PDF. Si estos elementos son importantes, captúrelos por separado como capturas de pantalla e insértelos en el PDF después de la captura del contenido principal.
Las páginas web diseñadas con diseños responsivos pueden ofrecer un diseño diferente al motor de impresión que a la pantalla. Un diseño adaptable a dispositivos móviles que se ve limpio en un teléfono puede imprimirse como una columna estrecha con excesivo espacio en blanco. Probar la salida de impresión en diferentes anchos de ventana del navegador puede identificar el tamaño de ventana que produce la mejor salida de PDF.
Las páginas web que utilizan CSS Grid o Flexbox para el diseño pueden redistribuirse de manera impredecible cuando se imprimen porque la hoja de estilo de impresión a menudo reemplaza el complejo diseño de la pantalla con un diseño lineal simplificado. El contenido que apareció uno al lado del otro en la pantalla aparece apilado verticalmente en el PDF.
Es posible que las fuentes personalizadas cargadas desde servicios web como Google Fonts o Adobe Fonts no estén disponibles para el motor de impresión del navegador. La salida de impresión sustituye las fuentes del sistema, cambiando la apariencia del texto, la longitud de las líneas y los saltos de página.
Las imágenes de fondo y los degradados aplicados mediante CSS normalmente no se imprimen de forma predeterminada para ahorrar tinta. Una sección que dependía de un fondo oscuro con texto claro para facilitar la lectura puede volverse invisible cuando se elimina el fondo y el texto claro permanece.
Las páginas web con encabezados fijos o barras de navegación fijas pueden aparecer en medio del contenido del PDF en cada página. Estos elementos se colocan en relación con la ventana gráfica, no con el contenido de la página, y su posición fija se pierde en la conversión de PDF.
El nivel de zoom del navegador al imprimir afecta la salida del PDF. Una página impresa con un zoom del 100 por ciento produce resultados diferentes a los de la misma página impresa con un zoom del 75 por ciento. El nivel de zoom cambia el tamaño del texto y el recuento de páginas.
Imprimir una página web desde un navegador móvil produce resultados diferentes a los de imprimir desde un navegador de escritorio porque los navegadores móviles a menudo ofrecen una versión simplificada de la página al motor de impresión.
En las páginas web detrás de un inicio de sesión o un muro de pago, el PDF impreso puede incluir contenido que solo era visible después de la autenticación. El PDF se convierte en un registro del contenido autenticado y debe tratarse con la seguridad adecuada.
Las extensiones del navegador que modifican la apariencia de la página web, como bloqueadores de anuncios, extensiones de modo oscuro y hojas de estilo personalizadas, afectan la salida de impresión. El PDF impreso refleja la página modificada tal como la presenta la extensión.
Guardar una página web como PDF es fundamentalmente una instantánea de un medio dinámico en un formato estático. La conversión captura la página en un momento determinado, congelando el contenido que puede cambiar minutos después.
Para fines de archivo, un PDF guardado desde una página web debe incluir la URL y la fecha de acceso en los metadatos del documento o en la primera página para que los futuros lectores puedan localizar la fuente original.
Las páginas web con marcos de JavaScript pesados como React, Angular o Vue pueden no representar casi nada en la salida PDF porque el motor de impresión captura la página antes de que JavaScript haya terminado de construir el DOM. Esperar varios segundos después de que la página parezca cargarse antes de imprimir le da tiempo al marco para completar la renderización.
Las consultas de medios CSS dirigidas a la impresión pueden ocultar o mostrar elementos específicos. Una hoja de estilos de impresión bien diseñada incluye el contenido principal y excluye la navegación, los anuncios y los comentarios. Una hoja de estilos de impresión mal diseñada o ausente recurre al diseño de la pantalla, lo que puede no traducirse bien en las dimensiones de página fijas de un PDF.
La caché del navegador afecta la salida de PDF al imprimir páginas que requieren autenticación. Si el navegador tiene credenciales almacenadas en caché, la salida de impresión incluye contenido autenticado. Si la sesión ha expirado, la salida impresa puede mostrar una página de inicio de sesión en lugar del contenido previsto. Verifique el contenido de la página antes de imprimir desplazándose por toda la página.
Imprimir una página web que contiene iframes incrustados de otros dominios puede producir áreas en blanco donde debería aparecer el contenido del iframe. Las restricciones de origen cruzado impiden que el motor de impresión acceda al contenido del iframe desde diferentes dominios. La salida PDF muestra rectángulos vacíos donde estaba el contenido incrustado en la pantalla.
Para capturas de páginas web críticas, utilice la función Guardar como del navegador para guardar la página web completa, HTML y recursos, antes de imprimir en PDF. La copia guardada sirve como referencia de cómo debería verse la página y puede comparar la salida del PDF con la copia guardada para identificar lo que se perdió durante la conversión de impresión.