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 building an interactive PDF file in Angular that contains images and other graphics elements.
 |
| Photo by Andrea Piacquadio |
Creating PDFs with images in Angular can be a daunting task. 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
library.
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
Step 2: import images to convert into pdf
images = [
{
name: 'Image 1',
url: 'https://images.pexels.com/photos/9785872/pexels-photo-9785872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
},
{
name: 'Image 2',
url: 'https://images.pexels.com/photos/9219241/pexels-photo-9219241.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
},
{
name: 'Image 3',
url: 'https://images.pexels.com/photos/14558326/pexels-photo-14558326.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
}
];
Step 3: Add images on HTML using ngFor
<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>
</div>
<div class="col-md-12 mt-3">
<button (click)="download()" class="btn btn-primary">Download PDF</button>
</div>
</div>
</div>
Step 4: Create canvas element to draw images on
getBase64Image(img: any) {
var canvas = document.createElement('canvas');
canvas.classList.add('myStyle');
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
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)
);
doc.addImage(
imageData.img,
'JPG',
10,
10,
imageData.width,
imageData.height
);
doc.addPage();
}
doc.save('testPdf.pdf');
}Step: 6 check the output
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.
.jpg)
0 Comments