Images to a PDF with simple 5 steps using angular

Creating PDFs with images in Angular can be a great way to share information, documents and ideas with others. This tutorial will walk you through the steps of convert images to a PDF file in Angular that contains images and other graphics elements.

Fortunately, there are many tools available to help you accomplish this feat.

We will use the jspdf library, which is a JavaScript-based library for generating client-side PDFs. By following this guide you’ll learn how to create a pdf in angular, using the jspdf

You’ll also find out about some of the features available for customizing your documents, such as page size and layout options, font selection, text formatting and more.

With this guide you’ll be able to quickly generate professional looking PDF documents from any image using jspdf addimage functionality or graphic element within your angular application.

Step 1: Install jspdf

In order to convert image to pdf, let’s get started by installing jspdf and exploring its features!

npm i jspdf –save

Creating PDFs with multiple images is a powerful way to present your work. Whether it’s a report, magazine, or portfolio, using jspdf in Angular can help you take control of how and where your images are displayed.

Jspdf is an open source library that allows you to generate PDF files directly from JavaScript code. It works on both client-side and server-side applications, making it versatile and easy to use.

To create a PDF file with multiple images in Angular, all you need is the jspdf library and some basic HTML/CSS coding skills.

Once everything is set up correctly, you can use the library’s API methods to add image elements into the document object model (DOM).

Step 2: import images to convert into pdf

Now we need the images that we want to convert into pdf.

images = [
      name: 'Image 1',
      url: '',
      name: 'Image 2',
      url: '',
      name: 'Image 3',
      url: '',

Step 3: Add images on HTML using ngFor

Now we have all images link and we them in an array to make them in list in order to create the pdf. we will add this array in ngfor to show all together.
Make sure we have individual ids for each item in the ngfor so we added the index like this.

<div class="container">
	<div class="row">
		 <div class="img-view-hideen">
			<div class="ivh-item" *ngFor="let img of images;let i=index">
			<img id="img{{i}}" class="img-fluid" [src]="img.url">
		<div class="col-md-12 mt-3">
			<button (click)="download()" class="btn btn-primary">Download PDF</button>

Step 4: Create canvas element to draw images on

jsPdf is an open source library for creating and manipulating PDF documents through HTML5 canvas elements. It allows users to generate a PDF document directly from the canvas element, making it quick and easy to convert images, text, tables, etc., into a high-quality PDF file. This is how we can convert  image to pdf using jspdf canvas.
Additionally, the library includes features such as font embedding, encryption and compression which enable users to create secure and optimized documents in no time at all.
In order to create the pdf , We need to create draw the image on canvas so that it could be converted into pdf later on.

 getBase64Image(img: any) {
    var canvas = document.createElement('canvas');
    console.log(img.width, 'x', img.height);
    canvas.width = 446;
    canvas.height = 631;
    var ctx: any = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL('image/png');
    return { img: dataURL, width: canvas.width, height: canvas.height };

Step 5: Add Base64Image on jsPDF object

Printing images on PDF using jspdf is a great way to create dynamic documents for various purposes. we need to add our images url to that document.
It allows users to easily convert an image file into a PDF document that can be used for printing, sharing, or archiving. With the help of jspdf library, it is possible to generate a PDF with multiple pages, including text and images.

download() {
    let doc = new jsPDF('p', 'px', 'a4');
    for (var i = 0; i < this.images.length; i++) {
      let imageData: any = this.getBase64Image(
        document.getElementById('img' + i)

Step: 6 check the output

The angular framework simplifies the process even further since it has native libraries that allow you to quickly convert an image into a valid object with in your application.
This is how we can ready our images in an array and then use jspdf to print them in canvas and  download. This is how jspdf helps convert html to pdf with image.
How to Create PDF with Images using jspdf in angular

This is how you can convert your images into a pdf using jspdf library in angular. You  can handle this work in any requirement either you have to upload the image from computer first or you have images already, then you can easily bind them in the canvas just like we did with these images.

The ability to add images in PDF documents is an invaluable tool for any web developer. Angular provides a wealth of tools to help developers integrate this feature into an application or website. In this article, we had taken a look at how to use the JavaScript library jsPDF with Angular to add images in PDF files.

jsPDF is a popular library that gives developers the ability to generate and manipulate PDF documents on the client-side. It allows you to easily generate a PDF file from HTML and CSS code, as well as add images, tables, and other elements into your document.

The library also supports SVG graphics, so it’s possible to incorporate vector images into your PDFs without having to convert them first.

With jsPDF and Angular, adding images in PDFs has never been easier.


In conclusion,creating a PDF with images using jspdf in angular can be an easy process. You just need to make sure that you have the right components installed and know how to access them.
This includes including the jsPDF library, getting your image files ready, and writing the code necessary to add them to your PDF.
With the help of JSPDF, a JavaScript library that enables you to generate PDF documents from client-side HTML and JavaScript code, it is now easier than ever to convert an image into a PDF. The library helps you to create professional looking documents with text and images in no time.
Once these steps are complete, you should have a beautiful, usable PDF file ready for download or to be shared with others.

Related topics

9 thoughts on “Images to a PDF with simple 5 steps using angular

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top