Convertir de HTML a PDF utilizando Javascript

El formato PDF es muy útil para descargar datos de forma masiva en una aplicación web. Ayuda a los usuarios a descargar contenido dinámico en forma de archivo para que lo puedan utilizar sin conexión. Con la función de exportar a PDF, el contenido HTML se convierte en un documento PDF para que se pueda descargar después sin problema. En esta aplicación, utilizaremos un script del lado del servidor para convertir HTML a PDF generando un archivo que puede ser descargado por el usuario.

Si quieres que una solución del lado del cliente genere un documento PDF, Javascript es la forma más sencilla de convertir HTML a PDF. Existen varias librerías de Javascript que generan archivos PDF a partir de HTML. JsPDF es una de las mejores librerías para llevar a cabo esto. Es muy simple. En este tutorial te enseñaremos cómo generar documentos PDF y convertir HTML a PDF usando jQuery y la librería jsPDF.

Incluye jQuery y la librería jsPDF

<!-- jQuery library -->
<script src="js/jquery.min.js"></script>

<!-- jsPDF library -->
<script src="js/jsPDF/dist/jspdf.min.js"></script>

Instancia la clase jsPDF

Utiliza la siguiente línea de código para instanciar y utilizar el objeto jsPDF en Javascript.

var doc = new jsPDF();

Genera un PDF utilizando Javascript

El siguiente ejemplo muuestra cómo utilizar la librería jsPDF para generar un fichero PDF utilizando Javascript.

• Define el contenido en el método text() del objeto jsPDF
• Utiliza el método addPage() para añadir nuevas páginas al PDF
• Utiliza el método save() para generar y descargar el fichero PDF

var doc = new jsPDF();

doc.text(20, 20, 'Hola mundo');
doc.text(20, 30, 'Vamos a generar un pdf desde el lado del cliente');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visita programacion.net');

// Save the PDF
doc.save('documento.pdf');

Convertir contenido HTML a PDF utilizando Javascript

El siguiente ejemplo muestra cómo utilizar la librería jsPDF para convertir HTML en PDF y generar un fichero PDF a partir de contenido HTML utilizando Javascript.

• Recupera el contenido HTML de un elemento específico mediante el ID o la clase
• Convierte el contenido de dicho elemento a PDF y genera el fichero
• Guarda y descarga el fichero

Codigo HTML

<div id="content">
    <!-- el contenido HTML va aqui -->
</div>

<div id="elementH"></div>

Código Javascript

var doc = new jsPDF();
var elementHTML = $('#content').html();
var specialElementHandlers = {
    '#elementH': function (element, renderer) {
        return true;
    }
};
doc.fromHTML(elementHTML, 15, 15, {
    'width': 170,
    'elementHandlers': specialElementHandlers
});

// Save the PDF
doc.save('sample-document.pdf');

Configuraciones interesantes

La librería jsPDF cuenta con varios métodos y opciones para configurar la creación del PDF. Algunos de estos métodos te los mostramos más abajo.

Cambiar la orientación del papel

Utiliza la opción orientation para definir la orientación del papel.

var doc = new jsPDF({
    orientation: 'landscape'
});

doc.text(20, 20, 'Hola mundo');
doc.text(20, 30, 'Vamos a generar un pdf desde el lado del cliente.');

// Add new page
doc.addPage();
doc.text(20, 20, 'Visita programacion.net');

// Save the PDF
doc.save('documento.pdf');

Cambiar la fuente

Utiliza los métodos setFont() y setFontType() para definir la fuente del PDF.

var doc = new jsPDF();
	
doc.text(20, 20, 'This is the default font.');

doc.setFont("courier");
doc.setFontType("normal");
doc.text(20, 30, 'Esto es courier normal.');

doc.setFont("times");
doc.setFontType("italic");
doc.text(20, 40, 'Esto es times italic.');

doc.setFont("helvetica");
doc.setFontType("bold");
doc.text(20, 50, 'Esto es helvetica bold.');

doc.setFont("courier");
doc.setFontType("bolditalic");
doc.text(20, 60, 'Esto es courier bolditalic.');

// Save the PDF
doc.save('documento.pdf');

Cambiar el tamaño de la fuente

Utiliza el método setFontSize() para cambiar el tamaño del texto del PDF.

var doc = new jsPDF();
	
doc.setFontSize(24);
doc.text(20, 20, 'Esto es el titulo');

doc.setFontSize(16);
doc.text(20, 30, 'Esto es un texto con un tamaño normal.');

// Save the PDF
doc.save('documento.pdf');

Cambiar el color de la fuente

Utiliza el método setTextColor() para definir el color del texto del PDF.

var doc = new jsPDF();
	
doc.setTextColor(100);
doc.text(20, 20, 'Esto es gris.');

doc.setTextColor(150);
doc.text(20, 30, 'Esto es gris claro.');

doc.setTextColor(255,0,0);
doc.text(20, 40, 'Esto es rojo.');

doc.setTextColor(0,255,0);
doc.text(20, 50, 'Esto es verde.');

doc.setTextColor(0,0,255);
doc.text(20, 60, 'Esto es azul.');

// Save the PDF
doc.save('document.pdf');