Cómo generar PDFs con JavaScript usando jsPDF — Guía práctica

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 e informes. Su principal ventaja es que mantiene el diseño intacto en cualquier dispositivo, algo clave cuando hablamos de documentos oficiales que el usuario necesita imprimir o compartir.

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 el backend.
• Posibilidad de trabajar incluso sin conexión a Internet.
• Mayor control visual sobre el resultado final del documento.

Principales librerías JavaScript para trabajar con PDFs

No todas las librerías sirven para lo mismo, y aquí es donde muchos desarrolladores cometen el primer error: elegir la herramienta equivocada para el trabajo. La reportería es un tema fundamental en cualquier sistema; exportar datos desde una página web a formato PDF es una tarea de lo más habitual, y puede realizarse fácilmente 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, jsPDF es la que más me ha convencido por su sencillez y lo intuitiva que resulta al momento de crear documentos desde cero.

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 construir documentos desde cero sin complicaciones.

Es ideal cuando necesitas:

• Generar reportes PDF directamente en el frontend.
• Exportar datos tabulares o listados.
• 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 la misma librería que potencia el visor de PDFs integrado en Firefox.

Es perfecta si tu objetivo es:

• Mostrar documentos PDF embebidos en una web sin depender de plugins del navegador.
• Añadir zoom, navegación por páginas o búsqueda de texto dentro del documento.

Pero si lo que buscas es crear o modificar PDFs, PDF.js no es la herramienta adecuada: su propósito es exclusivamente la visualización.

pdf-lib: crear y modificar PDFs existentes

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

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

• Editar PDFs existentes sin regenerarlos desde cero.
• Crear y rellenar formularios interactivos.
• Manipular páginas, incrustar fuentes personalizadas y fusionar documentos.

Creando un PDF con jsPDF: generar archivos PDF paso a paso

jsPDF es una librería JavaScript gratuita, compatible con cualquier tipo de proyecto, que permite generar archivos PDF de manera muy sencilla y sin depender de otros lenguajes. Es ligera, rápida y con unas pocas líneas de código podemos tener nuestros reportes listos para descargar.

Lo primero que debemos hacer es descargar la librería desde su repositorio oficial en GitHub o instalarla vía npm.

Una vez descargada, la descomprimimos y añadimos la dependencia a nuestra página web:

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

Con la librería importada ya podemos utilizar toda la API que nos ofrece jsPDF. Lo primero 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 esa instancia, la librería nos provee una serie de funciones para realizar las operaciones más comunes:

Básicamente, jsPDF está diseñada para dibujar:

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

Si quisiéramos generar un PDF con un título seguido de una imagen, el resultado sería algo así:

Para conseguirlo basta 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 en formato base64.
• La función setFontSize() especifica el tamaño de la letra.
• La función text() agrega un texto en la posición especificada (coordenadas x, y).
• La función addImage() agrega una imagen en la posición y tamaño especificados.
• La función save() genera el archivo y dispara la descarga en el navegador con el nombre indicado.

Personalizar PDFs: fuentes, colores y tamaños

Colocando el código completo obtenemos un PDF completamente funcional:

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 landscape, metadata y alineación de textos

Otro ajuste muy útil es indicar que la hoja del PDF tenga orientación horizontal (landscape). Para ello basta con pasar el parámetro correspondiente al constructor y, opcionalmente, definir los metadatos del documento con setProperties():

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

El método setProperties() permite definir los metadatos internos del archivo PDF, como el título, el autor o las palabras clave. Estos datos se almacenan dentro del propio documento y son visibles en las propiedades del archivo:

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');

Tamaño de texto en el PDF

Para cambiar el tamaño del texto del PDF tenemos la función setFontSize(). Podemos llamarla tantas veces como sea necesario para aplicar diferentes tamaños a distintas partes del documento:

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');

Tipo de fuente en el PDF

También podemos cambiar el tipo de fuente y su formato con los métodos setFont() y setFontType() respectivamente. jsPDF incluye de serie fuentes como courier, times y helvetica, con soporte para estilos como normal, italic, bold y bolditalic:

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 asignar colores a los textos de nuestros documentos PDF mediante el método setTextColor(), que acepta tanto valores en escala de grises (un solo número) como valores RGB (tres números separados por comas):

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 textos en el PDF

La alineación del texto se controla a través del mismo método text(), pasando un parámetro adicional con el valor de alineación ('center', 'right') y, opcionalmente, el ángulo de rotación en grados:

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 en el PDF

En todos los casos se emplean algunas funciones comunes: el método setDrawColor() para indicar el color del trazado y el método setFillColor() para el color de relleno. A partir de ahí, cada figura tiene su propio método dedicado como podrás ver a continuación:

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 han sido extraídos y adaptados desde la documentación oficial de jsPDF. 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 en proyectos reales, esta es mi recomendación clara:

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

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

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 generadas desde el cliente.
• Informes personalizados por usuario o por rango de fechas.
• Resúmenes o exportaciones de datos desde dashboards o paneles de control.

jsPDF encaja perfectamente en estos escenarios por su simplicidad, su nula dependencia de backend y el control visual que ofrece sobre el resultado final.

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

Algunos errores frecuentes que he visto (y cometido) al trabajar con estas librerías:

• Usar PDF.js para intentar generar PDFs (no es su propósito; es un visor, no un generador).
• No optimizar las imágenes antes de convertirlas a base64, lo que puede generar archivos enormes.
• No controlar bien las posiciones del contenido mediante las coordenadas x e y, lo que provoca superposiciones.
• Olvidar definir el tamaño de página y la orientación al instanciar new jsPDF(), usando siempre los valores por defecto.

Tener presentes estos puntos desde el inicio mejora considerablemente el resultado final y te ahorra horas de depuración.

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 sin necesidad de backend.
• ¿Qué librería JavaScript es mejor para crear PDFs?
  • Para generación desde cero, jsPDF es la opción más sencilla y documentada. Para modificar PDFs existentes o trabajar con formularios, pdf-lib es más potente y flexible.
• ¿Se puede generar un PDF solo con frontend, sin backend?
  • Sí, totalmente. Tanto jsPDF como pdf-lib funcionan perfectamente en el navegador sin necesidad de ningún servidor.
• ¿Cuál es la versión actual de jsPDF?
  • Al momento de escribir este artículo, la versión estable es jsPDF 2.5.1. Puedes consultar siempre la última versión en su repositorio oficial en GitHub.

Conclusión

Generar PDFs con JavaScript es una solución práctica, potente y cada vez más extendida 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 o por lo que veas en el primer tutorial que encuentres.

Si buscas simplicidad y rapidez para generar reportes directamente en el cliente, jsPDF es una apuesta segura. Si necesitas algo más avanzado, como manipular documentos ya existentes o gestionar formularios complejos, pdf-lib puede llevar tus documentos al siguiente nivel.