Crear PDF con Javascript y jsPDF

by Janeth Kent Date: 04-12-2022 pdf 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





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

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

 
by Janeth Kent Date: 04-12-2022 pdf javascript visitas : 970  
 
Janeth Kent

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN AND DEVELOPMENT.

 
 
 

Artículos relacionados

Javascript: 12 e-book gratis para usuarios avanzados

El mundo del desarrollo web y del diseño web , como os hemos dicho el el post: Javascript: 16 e-book gratis para usuarios intermedios se ha venido expandiendo en esta última…

Aprender diseño web: 13 libros gratis

¿Cómo aprendo a diseñar? ¿Cómo hago un formulario de contacto? ¿Dónde puedo descargar un manual de HTML5 o JavaScript? ¿Estás buscando algúnos manuales y libros sobre diseño web y desarrollo de páginas? Estos…

Utilizamos cookies propias y de terceros para mejorar nuestros servicios, elaborar información estadística y analizar tus hábitos de navegación. Esto nos permite personalizar el contenido que ofrecemos y mostrarte publicidad relacionada con tus preferencias. Clicando en ‘Acepta todas’ aceptas el almacenamiento de cookies en tu dispositivo para mejorar la navegación en el sitio web, analizar el tráfico y ayudar en nuestras actividades de marketing. También puedes seleccionar ‘Sólo cookies de sistema’ para aceptar sólo las cookies necesarias para que la web funcione, o puedes seleccionar las cookies que quieres activar clicando en ‘Configuración’

Acepta todas Sólo cookies de sistema Configuración