Cómo exportar tablas HTML a documentos PDF usando JavaScript

Las aplicaciones web que contienen tablas, tablas y gráficos a menudo incluyen una opción para exportar los datos como PDF. ¿Alguna vez se ha preguntado, como usuario, qué sucede debajo del capó cuando hace clic en ese botón?

Y como desarrollador, ¿cómo logra que la salida en PDF se vea profesional? La mayoría de los exportadores de PDF gratuitos en línea esencialmente solo convierten el contenido HTML en un PDF sin realizar ningún formateo adicional, lo que puede dificultar la lectura de los datos. ¿Qué pasaría si también pudiera agregar cosas como encabezados y pies de página, números de página o encabezados de columnas de tablas repetitivas? Pequeños toques como estos pueden contribuir en gran medida a convertir un documento de aspecto amateur en uno elegante.

Recientemente, exploré varias soluciones para generar archivos PDF y creé esta aplicación de demostración para mostrar los resultados. Todo el código también está disponible aquí en Github . ¡Empecemos!

Descripción general de la aplicación de demostración

Aplicación de demostración de HTML a PDF

Nuestra aplicación de demostración contiene una tabla de estilo extenso y cuatro botones para exportar la tabla como PDF. La aplicación está construida con HTML básico, CSS y JavaScript básico, pero puede crear fácilmente el mismo resultado utilizando su marco de interfaz de usuario o la biblioteca de su elección.

Cada botón de exportación genera el PDF utilizando un enfoque diferente. Visto de derecha a izquierda, el primero utiliza la funcionalidad de impresión del navegador nativo. El segundo usa una biblioteca de código abierto llamada jsPDF . El tercero usa otra biblioteca de código abierto llamada pdfmake . Y por último, el cuarto utiliza un servicio de pago llamado DocRaptor .

Profundicemos en cada solución una por una.

Funcionalidad de impresión nativa del navegador

En primer lugar, consideremos exportar el PDF usando las herramientas integradas del navegador. Al ver cualquier página web, puede imprimir fácilmente la página haciendo clic derecho en cualquier lugar y luego eligiendo la opción Imprimir del menú. Esto abre un cuadro de diálogo para que elija la configuración de impresión. Pero, en realidad no tiene que imprimir el documento. El cuadro de diálogo también le da la opción de guardar el documento como PDF, que es lo que haremos. En JavaScript, el

 window

 print

Aquí está el resultado del navegador Chrome de Google:

PDF exportado utilizando la función de impresión integrada y el navegador Chrome

Me sorprendió gratamente la salida aquí. Aunque no es llamativo, el contenido es solo en blanco y negro, los estilos de la tabla principal se mantuvieron intactos. Además, cada una de las siete páginas incluye los encabezados y el pie de página de las columnas de la tabla, que asumo que el navegador recoge de manera inteligente debido a mi elección de HTML semántico para crear una tabla estructurada correctamente.

Sin embargo, no me gustan los metadatos de página adicionales que el navegador incluye en el PDF. Cerca de la parte superior, vemos la fecha y el título de la página HTML. En la parte inferior de la página tenemos el sitio web desde el que se imprimió, así como el número de página.

Si mi único objetivo al guardar este documento es ver los datos, entonces Chrome hace un buen trabajo. Sin embargo, las líneas adicionales de texto en la parte superior e inferior del documento, si bien son útiles, no hacen que se vea muy profesional.

La otra cosa a tener en cuenta es que la funcionalidad de impresión nativa del navegador es diferente de un navegador a otro. ¿Qué pasa si imprimimos este mismo documento usando el navegador Safari?

Aquí está la salida:

PDF exportado utilizando la función de impresión integrada y el navegador Safari

Notará que la tabla se ve más o menos igual, al igual que el encabezado y el pie de página. Sin embargo, los encabezados de las columnas de la tabla y el pie de página de la tabla no se repiten. Esto es algo inútil ya que necesitaría volver a consultar la primera página cada vez que olvidara qué datos contiene una columna determinada. La parte inferior de la tabla en la primera página también está un poco recortada, ya que el navegador intenta introducir la mayor cantidad de contenido posible antes de crear la página siguiente.

Entonces, parece que la salida del navegador no es ideal y puede variar según el navegador que haya elegido el usuario.

jsPDF

A continuación, consideremos una biblioteca de código abierto llamada jsPDF . Esta biblioteca existe desde hace al menos cinco años y se descarga constantemente más de 200 000 veces desde NPM cada semana. Es seguro decir que esta es una biblioteca popular y probada en batalla.

jsPDF también es bastante fácil de usar. Usted crea una nueva instancia de la

 jsPDF

Debajo del capó, jsPDF usa una biblioteca llamada html2canvas. Como su nombre lo indica, html2canvas toma contenido HTML y lo convierte en una imagen almacenada en un HTML

 <canvas>

Echemos un vistazo a la salida que obtenemos usando jsPDF:

PDF exportado usando jsPDF

¡A primera vista, esto se ve bastante bien! El PDF incluye nuestros bonitos encabezados azules y el fondo de la fila de la tabla a rayas. No contiene ninguno de los metadatos de página adicionales que incluye el método de impresión del navegador.

Sin embargo, observe lo que sucede entre la página uno y dos. La tabla se extiende hasta la parte inferior de la primera página y luego vuelve a subir en la parte superior de la segunda página. No se aplica ningún margen adicional, y el contenido del texto de la tabla tiene el potencial de reducirse a la mitad, que es lo que sucede entre las páginas seis y siete.

El PDF tampoco incluye los encabezados de columna de la tabla repetitiva ni el pie de página de la tabla, que era el mismo problema que vimos en la funcionalidad de impresión de Safari.

Si bien jsPDF es una biblioteca poderosa, parece que esta herramienta puede funcionar mejor cuando el contenido exportado cabe en una sola página.

pdfhacer

Echemos un vistazo a nuestra segunda biblioteca de código abierto, pdfmake . Con más de 300 000 descargas semanales de NPM y una vida útil de siete años, esta biblioteca es aún más popular y más antigua que jsPDF.

Mientras construía la funcionalidad de exportación para mi aplicación de demostración, la configuración de pdfmake fue considerablemente más difícil que la de jsPDF. La razón de esto es que pdfmake construye el documento PDF desde cero utilizando los datos que le proporciona en lugar de convertir el contenido HTML existente en la página en un PDF. Eso significa que en lugar de proporcionarle a pdfmake una referencia a mi tabla HTML, tuve que proporcionarle datos para el encabezado, el pie de página, el contenido y el diseño de mi tabla PDF. Esto llevó a mucha duplicación en mi código; Primero escribí la tabla en mi HTML y luego reconstruí la tabla para la exportación de PDF con pdfmake.

El código se ve así:

Antes de descartar pdfmake por completo, echemos un vistazo a la salida:

PDF exportado usando pdfmake

¡No está nada mal! Podemos incluir estilos para nuestra tabla, por lo que aún podemos reproducir los encabezados de las columnas azules y los fondos de las filas de la tabla a rayas. También obtenemos los encabezados de columna de la tabla repetitiva para facilitar el seguimiento de los datos que estamos viendo en cada columna de cada página.

pdfmake también me permitió incluir un encabezado de página y un pie de página, por lo que es fácil agregar números de página. Sin embargo, notará que el contenido de la tabla entre la página uno y la página dos aún no está perfectamente separado. El salto de página divide parcialmente la fila de 2002 entre las páginas.

En general, parece que la mayor fortaleza de pdfmake está en la construcción de archivos PDF desde cero. Si, por ejemplo, desea generar una factura basada en algunos datos del pedido y en realidad no muestra la factura en la pantalla dentro de su aplicación web, entonces pdfmake sería una excelente opción.

Doctor Raptor

La última opción que consideraremos es DocRaptor . DocRaptor se diferencia de las primeras tres opciones que exploramos en que es un servicio pago. Utiliza el motor Prince de HTML a PDF debajo del capó para generar sus exportaciones de PDF. Este servicio también se usa a través de una API, por lo que su código llega a un punto final de API externo que luego devuelve el documento PDF.

La configuración básica de DocRaptor es bastante simple. Le proporciona el nombre de su documento, el tipo de documento que desea crear (

 'pdf'

Esto es lo que usé:

Echemos un vistazo a la exportación de PDF generada por DocRaptor:

PDF exportado usando DocRaptor

¡Ahora hay un documento atractivo! Podemos mantener nuestros bonitos estilos de mesa. Los encabezados de las columnas de la tabla y el pie de página de la tabla se repiten en cada página. Las filas de la tabla no se cortan y hay un margen de tamaño adecuado en todos los lados de la página. El encabezado de la página también se repite en cada página, al igual que los números de página en la parte inferior de cada página.

Para crear el texto del encabezado y el pie de página , DocRaptor recomienda usar CSS con el selector @page, como este:

Cuando se trata de la salida en PDF, DocRaptor es el claro ganador.

(Como bono adicional, ¡compruebe cómo puede verse un encabezado HTML con estilo de sangrado completo !)

Conclusión

Entonces, ¿qué opción eliges para tu aplicación? Si desea la solución más simple y no necesita un documento de aspecto profesional, la funcionalidad de impresión del navegador nativo debería estar bien. Si necesita más control sobre la salida de PDF, querrá usar una biblioteca.

jsPDF brilla cuando se trata de contenido de una sola página generado en base a HTML que se muestra en la interfaz de usuario. pdfmake funciona mejor cuando genera contenido PDF a partir de datos en lugar de HTML. DocRaptor es el más poderoso de todos con su API simple y su hermosa salida en PDF. Pero, de nuevo, a diferencia de los demás, es un servicio de pago. Sin embargo, si su negocio depende de la generación de documentos elegantes y profesionales, DocRaptor bien vale el costo.

También publicado en Dev.to