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:

Introducción a JavaScript reporting server

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.

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 del siguiente enlace:

jsPDF

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

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 imgData = 'data:image/jpeg;base64,/ …;

doc.setFontSize(40);
doc.text(40, 20, "Octocat loves jsPDF");
doc.addImage(imgData, 'JPEG', 10, 40, 180, 180);

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.

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:

PDFs 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.save('Test.pdf');

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:

Ver ejemplo Descargar

JavaScript

PDF

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy

Generando reportes o archivos PDFs con JavaScript