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 pdfjavascript
visitas :
970
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.
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…
¿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…
MENSAJE
OPERACIÓN EJECUTADA
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’
Estas cookies son necesarias para que el sitio web funcione y no se pueden desactivar en nuestros sistemas. Por lo general, solo se configuran en respuesta a sus acciones realizadas al solicitar servicios, como establecer sus preferencias de privacidad, iniciar sesión o completar formularios. Puede configurar su navegador para bloquear o alertar sobre estas cookies, pero algunas áreas del sitio no funcionarán. Estas cookies no almacenan ninguna información de identificación personal.
Cookies de rendimiento
Estas cookies nos permiten contar las visitas y fuentes de tráfico para poder evaluar el rendimiento de nuestro sitio y mejorarlo. Nos ayudan a saber qué páginas son las más o las menos visitadas, y cómo los visitantes navegan por el sitio. Toda la información que recogen estas cookies es agregada y, por lo tanto, es anónima. Si no permite utilizar estas cookies, no sabremos cuándo visitó nuestro sitio y no podremos evaluar si funcionó correctamente.
Cookies funcionales
Estas cookies permiten que el sitio web proporcione una mejor funcionalidad y personalización. Pueden ser establecidas por nuestra empresa o por proveedores externos cuyos servicios hemos agregado a nuestras páginas. Si no permite utilizar estas cookies, es posible que algunos de estos servicios no funcionen correctamente.
Cookies dirigidas
Estas cookies pueden ser establecidas a través de nuestro sitio por nuestros socios publicitarios. Pueden ser utilizadas por esas empresas para crear un perfil de sus intereses y mostrarle anuncios relevantes en otros sitios. No almacenan directamente información personal, sino que se basan en la identificación única de su navegador y dispositivo de Internet. Si no permite utilizar estas cookies, verá menos publicidad dirigida.