Agregar una Imagen a un PDF generado con la librería jsPDF

 in Javascript by

Ya hemos hablado muchas veces de la librería jsPDF, la cual es una excelente librería para crear PDFs en nuestros proyectos web, ahora veamos como agregar una imagen a un PDF generado con jsPDF.

Tenemos varios artículos sobre jspdf en este sitio web, vamos a tomar como base el primer ejemplo. Como crear un PDF con JSPDF aquí podrán ver como descargar la librería y lo básico de la librería jspdf.

Una vez descargado, que no es difícil, vamos a incluir el archivo jspdf.min.js al documento HTML que estemos usando y listo, ya podemos usar la librería.

Crear un PDF y Agregar una Imagen

Para crear un PDf y agregar imágenes con la librería JSPDF usaremos el siguiente código.

<script>
var pdf = new jsPDF();
pdf.text(20,20,"Agregar imagenes a un PDF!");
/// Codigo para agregar una imagen
var image1 = new Image();
image1.src = "imagen.jpg"; /// URL de la imagen
pdf.addImage(image1, 'JPEG', 25, 30, 170, 180); // Agregar la imagen al PDF (X, Y, Width, Height)
/////
pdf.save("mipdf.pdf");
</script>

Y asi es como podemos agregar una imagen al PDF, podemos modificar los valores de las posiciones X,Y y las medidas de la imagen Width y Height

En algunas ocasiones el PDF no se va a generar o descargar hasta que la imagen no cargue, en caso de que la imagen este muy pesada, en ese caso debemos esperar a que cargue la imagen y para ello usaremos el método onload de la imagen.

<script>
var pdf = new jsPDF();
pdf.text(20,20,"Agregar imagenes a un PDF!");
/// Codigo para agregar una imagen
var image1 = new Image();
image1.src = "imagen.jpg"; /// URL de la imagen
pdf.addImage(image1, 'JPEG', 25, 30, 170, 180); // Agregar la imagen al PDF (X, Y, Width, Height)
/////
image1.onload = function(){
pdf.save("mipdf.pdf");
}
</script>

Y listo asi podremos agregar una imagen a nuestro PDF.

Leave a comment