Generar PDF con NodeJS: crea los archivos desde una página web

4min

En más de una ocasión, publicamos en este blog tutoriales prácticos sobre NodeJS, uno de los frameworks más extendidos para el desarrollo frontend ala hora de crear una página web o una tienda online. Hoy nos queremos centrar en una funcionalidad de automatización que resulta muy útil para los desarrolladores de páginas web corporativas y tiendas online y que NodeJS realiza de manera muy efectiva gracias a las librerías disponibles: la generación de archivos PDF desde una página web. De este modo, NodeJS nos ofrece buen grado de personalización y hasta nos permite  añadir fácilmente cabeceras y pies de página, como veremos a continuación.

Índice

PhantomJS y html-pdf

Utilizaremos la librería html-pdf  para interpretar el contenido de la página y, a partir de él, crear el archivo PDF, pero también necesitaremos PhantomJS, una dependencia que interacciona con una página web de forma automática. ¿Por qué nos decantamos por html-pdf? Porque es funcional al 100%. En cuanto consigues ajustar cabeceras y pies de página, los resultados son muy buenos. Los PDF creados muestran buen aspecto y el contenido generado se adapta bien a los saltos de línea y a otros formatos.

Para instalar html-pdf con npm, podemos utilizar el siguiente comando:

npm install html-pdf

En la instalación se instalará también PhantomJS.

PhantomJS y html-pdf

Uso de html-pdf

Vamos a ver el uso de html-pdf con un ejemplo sencillo a partir de código HTML:

var pdf = require('html-pdf');
 var contenido = `
 <h1>Test para html-pdf</h1>
 <p>Estamos creando un archivo PDF con este código HTML sencillo</p>
 `;
 pdf.create(contenido).toFile('./salida.pdf', function(err, res) {
     if (err){
         console.log(err);
     } else {
         console.log(res);
     }
 });

Vemos que:

  • Realizamos require de html-pdf.
  • En una variable incluimos contenido HTML.
  • Invocamos al método create() de html-pdf, el cual recoge ese contenido.
  • Redireccionamos la salida a un archivo, encadenando el método toFile, indicando la ruta de salida. En este caso: ./salida.pdf.
  • Finalizamos con un callback, en el que podríamos realizar cualquier cosa cuando se termina de generar el PDF.

El resultado del código generado sería así:

Test para html-pdf

Si bien es un código muy sencillo, decir que la librería es capaz de realizar cosas más complejas, como pueden ser SVG o Canvas.

Opciones de configuración de html-pdf

Html-pdf proporciona una buena variedad de configuraciones que nos resultarán muy útiles.

Cuando vayamos a determinar la configuración que tendrá el PDF, tendremos que generar un objeto JSON que se envía como segundo parámetro en el método create().

Lo haremos de esta forma:

var options = {
  'format': 'A4',
  'header': {
      'height': '60px'
  },
  'footer': {
      'height': '22mm'
  },
  'base': 'file://Users/arsys/carpeta_base/'
 };

El parámetro base es muy útil cuando queremos expresar lo mismo que en HTML haríamos con la etiqueta <BASE>,, que especifica la dirección URL que utilizaremos de base  para todas las direcciones URL relativas contenidas dentro de un documento. Es el enlace donde se encuentran los ficheros externos del HTML, como imágenes, estilos, etc. Las rutas relativas que pongas en el HTML, y que se usarán en la creación del PDF, serán relativas a esta carpeta.

Incluir las cabeceras y los pies de página en el PDF

Es una de las cosas por las que destaca html-pdf. Podremos crear cualquier encabezado y pie de página en nuestro archivo y además es posible crearlos en las páginas que quieras.

Seremos capaces de definir valores desde el propio código HTML. Para colocar cabeceras y pies, se usa un identificador específico como pageHeader o pageFooter, aunque para definirlo en una página específica utilizaremos, por ejemplo, pageHeader-first o pageFooter-first. También podremos usar otros identifcadores, como pageFooter-last, pageHeader-2, pageFooter-3…

Aquí tenéis un l siguiente código de ejemplo, en el que tenéis que tener en cuenta que debe estar dentro de la cadena con el HTML que utilizas para crear el PDF. Es decir, tiene que ser parte del documento HTML que transformamo a PDF.

<div id='pageHeader' style='border-bottom: 1px solid #ddd; padding-bottom: 5px;'>
   <img src='https://arsys.es /images/logodwgris.png' width='150' height='27' align='left'>
   <p style='color: #666; margin: 0 0 32px 0;padding-top: 12px; padding-bottom: 5px; text-align: right; font-family: sans-serif; font-size: .85em'>
     Publicación
   </p>
 </div>
 <div id='pageFooter' style='border-top: 1px solid #ddd; padding-top: 5px;'>
   <p style='color: #666; width: 70%; margin: 0 0 32px 0;padding-bottom: 5px; text-align: let; font-family: sans-serif; font-size: .65em; '>https://arsys.es/manuales/publicar-webs-internet.html</p>
   <p style='color: #666; margin: 0 0 32px 0;padding-bottom: 5px; text-align: right; font-family: sans-serif; font-size: .65em'>Página {{page}} de {{pages}}</p>
 </div>
Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: