Generando reportes o archivos PDFs con JavaScript

Generar PDFs con JavaScript es una necesidad muy común en aplicaciones web modernas. En mi caso, me he encontrado una y otra vez con esta necesidad al construir sistemas de reportería, paneles administrativos o módulos de exportación de datos, donde los usuarios esperan poder descargar informes en PDF con un solo clic.

La buena noticia es que hoy existen varias librerías JavaScript que permiten crear, modificar y visualizar archivos PDF directamente desde el navegador, sin depender de otros lenguajes ni de un backend complejo. En esta guía te explico qué opciones existen, cuándo usar cada una y cómo generar PDFs personalizados paso a paso, con ejemplos reales.

Por qué generar PDFs con JavaScript en aplicaciones web

El formato PDF sigue siendo el estándar para documentos profesionales como facturas, reportes, contratos o informes. La principal ventaja es que mantiene el diseño intacto en cualquier dispositivo, algo clave cuando hablamos de documentos oficiales.

Desde el punto de vista del desarrollo web, generar PDFs con JavaScript tiene ventajas claras:

• Respuesta inmediata al usuario, sin llamadas al servidor.
• Menor carga en backend.
• Posibilidad de trabajar incluso sin conexión.
• Mayor control visual sobre el resultado final.

Principales librerías JavaScript para trabajar con PDFs

No todas las librerías sirven para lo mismo. Aquí es donde muchos desarrolladores se equivocan.

La reportería es un tema fundamental que hay que llevar a cabo en cualquier sistema; querer importar datos desde una página web a otro formato como PDF es una tarea de lo más habitual que puede ser fácilmente realizado a través de librerías JavaScript como las siguientes:

• JavaScript reporting server
• jsPDF
• ByteScout

En Google podrás encontrar una gran cantidad de librerías que realizan conversiones a PDF; sin embargo esta es una de las librerías que más me ha gustado debido a su sencillez al momento de crear un PDF.

jsPDF: crear PDFs desde cero de forma sencilla

jsPDF es, sin duda, una de las librerías más populares para generar PDFs con JavaScript. Personalmente, es una de las que más me ha gustado por su sencillez y rapidez a la hora de crear documentos desde cero.

Es ideal cuando necesitas:

• Generar reportes PDF.
• Exportar datos tabulares.
• Crear documentos personalizados con texto, imágenes y gráficos.

PDF.js: visualizar PDFs en el navegador

PDF.js, desarrollada por Mozilla, no está pensada para generar PDFs, sino para visualizarlos directamente en el navegador usando HTML5 y canvas.

Es perfecta si tu objetivo es:

• Mostrar documentos PDF embebidos en una web.
• Añadir zoom, navegación o búsqueda de texto.

Pero si lo que buscas es crear o modificar PDFs, PDF.js no es la herramienta adecuada.

pdf-lib: crear y modificar PDFs existentes

pdf-lib es una alternativa muy potente cuando necesitas modificar PDFs ya existentes, rellenar formularios o fusionar documentos.

Funciona tanto en navegador como en Node.js y permite:

• Editar PDFs existentes.
• Crear formularios.
• Manipular páginas y fuentes personalizadas.

Creando un PDF con jsPDF: Generar archivos PDF

jsPDF es una librería para JavaScript gratuita para cualquier tipo de proyectos que permite generar PDF con JavaScript de manera muy sencilla y sin depender de otros lenguajes; jsPDF es ligero y rápido al momento de generar PDF; con unas pocas líneas de código JavaScript podemos generar nuestros reportes PDF desde cero.

Lo primero que debemos hacer es descargar la librería JavaScript.

Paso siguiente la descomprimimos y colocamos la dependencia en nuestra web:

<script src="dist/jspdf.min.js"></script>

Una vez importada la librería ahora podemos emplear todas las funcionalidades que nos ofrece esta API para crear PDF; lo primero que debemos hacer es crear un objeto o instancia de tipo jsPDF:

var doc = new jsPDF();

Crear un PDF básico con texto e imágenes

A partir de aquí, la librería provee de una serie de funciones para realizar las operaciones más comunes:

Básicamente, la librería está provista para dibujar:

• Líneas.
• Textos.
• Imágenes.
• Formas geométricas.

Si quisiéramos crear un PDF; si quisiéramos agregar un título seguido de una imagen con la siguiente:

Nos bastará con aplicar las siguientes líneas de código:

var doc = new jsPDF();

doc.setFontSize(40);
doc.text(40, 20, "Octocat loves jsPDF");

var imgData = 'data:image/jpeg;base64,...';
doc.addImage(imgData, 'JPEG', 10, 40, 180, 180);

doc.save('ejemplo.pdf');

En donde:

• La variable imgData hace referencia a la imagen.
• La función setFontSize() especifica el tamaño de la letra.
• La función text() agrega un texto en la posición especificada.
• La función addImage() agrega una imagen en la posición especificada.

Personalizar PDFs: fuentes, colores y tamaños

Colocando el código completo:

var doc = new jsPDF();
var imgData = 'data:image/jpeg;base64,/ …;
doc.setFontSize(40);
doc.text(40, 20, "Octocat loves jsPDF");
doc.addImage(imgData, 'JPEG', 10, 40, 180, 180);

Y Obtenemos el siguiente PDF:

Orientación, metadata y alineación de textos: en formato landscape

Otro código que podemos emplear es para indicar que la hoja del PDF sea landscape; para ello:

var doc = new jsPDF('landscape');
doc.text(20, 20, 'Hello landscape world!');

doc.setProperties({
  title: 'Reporte',
  subject: 'Exportación de datos',
  author: 'Mi aplicación'
});

Metadata del Pdf generado

var doc = new jsPDF();
doc.text(20, 20, 'This PDF has a title, subject, author, keywords and a creator.');
// Optional - set properties on the document
doc.setProperties({
    title: 'Title',
    subject: 'This is the subject',
    author: 'James Hall',
    keywords: 'generated, javascript, web 2.0, ajax',
    creator: 'MEEE'
});
// Output as Data URI
doc.save('Test.pdf');

PDF tamaño de texto

Para cambiar el tamaño del texto del PDF tenemos la función setFontSize:

var doc = new jsPDF();
doc.setFontSize(22);
doc.text(20, 20, 'This is a title');
doc.setFontSize(16);
doc.text(20, 30, 'This is some normal sized text underneath.');
doc.save('Test.pdf');

PDF tipo de fuente

También podemos cambiar el tipo de texto y el formato de la misma con los métodos cambiar el tamaño del texto del PDF tenemos la función setFont y setFontType respectivamente:

var doc = new jsPDF();
doc.text(20, 20, 'This is the default font.');
doc.setFont("courier");
doc.text(20, 30, 'This is courier normal.');
doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'This is times italic.');
doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'This is helvetica bold.');
doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'This is courier bolditalic.');
doc.save('Test.pdf');

Coloreando los textos del PDF

También podemos colorear los textos de nuestros PDF como mostramos a continuación:

var doc = new jsPDF();
doc.setTextColor(100);
doc.text(20, 20, 'This is gray.');
doc.setTextColor(150);
doc.text(20, 30, 'This is light gray.');
doc.setTextColor(255,0,0);
doc.text(20, 40, 'This is red.');
doc.setTextColor(0,255,0);
doc.text(20, 50, 'This is green.');
doc.setTextColor(0,0,255);
doc.text(20, 60, 'This is blue.');
doc.save('Test.pdf');

Alineación de los textos del PDF

Por supuesto, también podemos alinear nuestros textos mediante el mismo método text:

var pdf = new jsPDF('p', 'pt', 'letter');
    
pdf.text( 'This text is normally\raligned.', 140, 50 );
pdf.text( 'This text is centered\raround\rthis point.', 140, 120, 'center' );
pdf.text( 'This text is rotated\rand centered around\rthis point.', 140, 300, 45, 'center' );
pdf.text( 'This text is\raligned to the\rright.', 140, 400, 'right' );
pdf.text( 'This text is\raligned to the\rright.', 140, 550, 45, 'right' );
pdf.text( 'This single line is centered', 460, 50, 'center' );
pdf.text( 'This right aligned text\r\rhas an empty line.', 460, 200, 'right' );
pdf.save('Test.pdf');

Dibujar formas geométricas del PDF

En todos los casos se emplean algunas funciones comunes como lo son el método setDrawColor para indicar el color del trazado y el método setFillColor para el color de relleno, los demás son métodos para dibujar cada tipo de figura geométrica como podrás analizar:

Cuadrados y rectángulos

var doc = new jsPDF();
doc.rect(20, 20, 10, 10); // empty square
doc.rect(40, 20, 10, 10, 'F'); // filled square
doc.setDrawColor(255,0,0);
doc.rect(60, 20, 10, 10); // empty red square
doc.setDrawColor(255,0,0);
doc.rect(80, 20, 10, 10, 'FD'); // filled square with red borders
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(100, 20, 10, 10, 'F'); // filled red square
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.rect(120, 20, 10, 10, 'FD'); // filled red square with black borders
doc.setDrawColor(0);
doc.setFillColor(255, 255, 255);
doc.roundedRect(140, 20, 10, 10, 3, 3, 'FD'); //  Black square with rounded corners
doc.save('Test.pdf');

Líneas

var doc = new jsPDF();
doc.line(20, 20, 60, 20); // horizontal line
doc.setLineWidth(0.5);
doc.line(20, 25, 60, 25);
doc.setLineWidth(1);
doc.line(20, 30, 60, 30);
doc.setLineWidth(1.5);
doc.line(20, 35, 60, 35);
doc.setDrawColor(255,0,0); // draw red lines
doc.setLineWidth(0.1);
doc.line(100, 20, 100, 60); // vertical line
doc.setLineWidth(0.5);
doc.line(105, 20, 105, 60);
doc.setLineWidth(1);
doc.line(110, 20, 110, 60);
doc.setLineWidth(1.5);
doc.line(115, 20, 115, 60);
doc.save('Test.pdf');

Círculos y elipses

var doc = new jsPDF();
doc.ellipse(40, 20, 10, 5);
doc.setFillColor(0,0,255);
doc.ellipse(80, 20, 10, 5, 'F');
doc.setLineWidth(1);
doc.setDrawColor(0);
doc.setFillColor(255,0,0);
doc.circle(120, 20, 5, 'FD');
doc.save('Test.pdf');

Triángulos

var doc = new jsPDF();
doc.triangle(60, 100, 60, 120, 80, 110, 'FD');
doc.setLineWidth(1);
doc.setDrawColor(255,0,0);
doc.setFillColor(0,0,255);
doc.triangle(100, 100, 110, 100, 120, 130, 'FD');
doc.save('My file.pdf');

Todos estos ejemplos fueron obtenidos de la documentación oficial, puedes descargar uno de los ejemplos en el siguiente enlace:

Cuándo usar jsPDF, PDF.js o pdf-lib (comparativa real)

Después de haber probado varias opciones, esta es mi recomendación clara:

• Usa jsPDF si necesitas generar PDFs desde cero en el frontend.
• Usa PDF.js si solo necesitas mostrar PDFs en el navegador.
• Usa pdf-lib si debes modificar PDFs existentes o trabajar con formularios complejos.

Elegir la librería correcta desde el inicio te ahorrará mucho tiempo y refactorizaciones innecesarias.

Casos reales de uso: reportes, facturas y exportación de datos

En sistemas reales, generar PDFs con JavaScript suele aplicarse a:

• Exportación de reportes administrativos.
• Facturas descargables.
• Informes personalizados por usuario.
• Resúmenes de datos desde dashboards.

jsPDF encaja perfectamente en estos escenarios por su simplicidad y control visual.

Errores comunes al generar PDFs con JavaScript y cómo evitarlos

Algunos errores frecuentes que he visto (y cometido):

• Usar PDF.js para generar PDFs (no es su propósito).
• No optimizar imágenes en base64.
• No controlar bien las posiciones del contenido.
• Olvidar definir tamaños de página y orientación.

Evitar estos puntos mejora mucho el resultado final.

Preguntas frecuentes sobre PDFs con JavaScript

• ¿Cómo generar un PDF con JavaScript?
  • Usando librerías como jsPDF o pdf-lib, que permiten crear archivos PDF directamente desde el navegador.
• ¿Qué librería JavaScript es mejor para crear PDFs?
  • Para generación desde cero, jsPDF es la opción más sencilla. Para modificar PDFs existentes, pdf-lib es más potente.
• ¿Se puede generar un PDF solo con frontend?
  • Sí, totalmente. jsPDF y pdf-lib funcionan perfectamente sin backend.

Conclusión

Generar PDFs con JavaScript es una solución práctica, potente y cada vez más común en aplicaciones web modernas. Tras probar varias librerías, mi recomendación es clara: elige la herramienta según tu necesidad real, no por moda.

Si buscas simplicidad y rapidez para generar reportes, jsPDF es una apuesta segura. Si necesitas algo más avanzado, pdf-lib puede llevar tus documentos al siguiente nivel.