Describe a PDF file
PDF was created by Adobe in the 1990s. It has two main objectives. The users’ ability to open the papers on any hardware or operating system was the primary objective. The second objective was to ensure consistency every time a user opened a PDF file.
Text, photos, embedded typefaces, hyperlinks, video, interactive buttons, forms, and more may all be found in PDF files.
Setup Angular Project
To start a fresh Angular project, use the Angular CLI command.
ng new angular-pdf
Start the Angular app in your preferred IDE next.
Install Bootstrap
We need to install the Bootstrap framework in Angular in order to manage the UI component. To contain the data that we will convert to PDF, we will use the Bootstrap table UI component.
npm install bootstrap
Include the Bootstrap CSS path in the styles array of the angular.json file.
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
]
Setup the jsPDF package
Next, run the command below to add the jsPDF package to your angular application.
npm install jspdf
The jsPDF and html2canvas libraries must be imported into the same component before PDF may be exported to Angular.
import jsPDF from 'jspdf'; import html2canvas from 'html2canvas';
Add bogus data
Declare a variable with some fictitious user data since we need to display some random data.
USERS = [
{
id: 1,
name: 'Prinkesha Lathidadiya',
email: 'Prinkesha@april.biz',
phone: '1-770-736-8031 x56442',
},
{
id: 2,
name: 'Qui fuga Perspiciat',
email: 'perspiciat@melissa.tv',
phone: '010-692-6593 x09125',
},
{
id: 3,
name: 'Omnis iste pariatur',
email: 'omnis@yesenia.net',
phone: '1-463-123-4447',
},
{
id: 4,
name: 'Quia pariatur Alias',
email: 'pariatur@kory.org',
phone: '493-170-9623 x156',
},
{
id: 5,
name: 'Autem et tempor dolo',
email: 'autem@annie.ca',
phone: '(254)954-1289',
},
{
id: 6,
name: 'Ratione totam nihil ',
email: 'ratione@jasper.info',
phone: '1-477-935-8478 x6430',
},
{
id: 7,
name: 'Ipsum placeat in r',
email: 'ipsum@jasper.info',
phone: '1-477-935-8478 x6430',
},
{
id: 8,
name: 'Omnis iste pariatur',
email: 'omnis@yesenia.net',
phone: '1-463-123-4447',
},
{
id: 9,
name: 'Quia pariatur Alias',
email: 'pariatur@kory.org',
phone: '493-170-9623 x156',
},
];
Angular PDF download
We call the new jsPDF() object and specify the PDF size in it to download the PDF. The name of the downloaded PDF is an input to the PDF.save() method.
ublic openPDF(): void {
let DATA: any = document.getElementById('htmlData');
html2canvas(DATA).then((canvas) => {
let fileWidth = 208;
let fileHeight = (canvas.height * fileWidth) / canvas.width;
const FILEURI = canvas.toDataURL('image/png');
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
PDF.save('angular-demo.pdf');
});
}
View in Bootstrap Table
Build the Table using the Bootstrap classes and UI elements, then fill it with dynamic data.
<section>
<div id="htmlData">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of USERS">
<th>{{ user.id }}</th>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right">
<button class="btn btn-dark" (click)="openPDF()">Download PDF</button>
</div>
</section>
Then, use the code provided below to add the download PDF button.
<div class="text-right"> <button class="btn btn-dark" (click)="openPDF()">Download PDF</button> </div>
The Last Code
Next, add the following code to the app.component.ts file.
import { Component, ElementRef, ViewChild } from '@angular/core';
import jsPDF from 'jspdf';
import html2canvas from 'html2canvas';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
@ViewChild('htmlData') htmlData!: ElementRef;
USERS = [
{
id: 1,
name: 'Prinkesha Lathidadiya',
email: 'Prinkesha@april.biz',
phone: '1-770-736-8031 x56442',
},
{
id: 2,
name: 'Qui fuga Perspiciat',
email: 'perspiciat@melissa.tv',
phone: '010-692-6593 x09125',
},
{
id: 3,
name: 'Omnis iste pariatur',
email: 'omnis@yesenia.net',
phone: '1-463-123-4447',
},
{
id: 4,
name: 'Quia pariatur Alias',
email: 'pariatur@kory.org',
phone: '493-170-9623 x156',
},
{
id: 5,
name: 'Autem et tempor dolo',
email: 'autem@annie.ca',
phone: '(254)954-1289',
},
{
id: 6,
name: 'Ratione totam nihil ',
email: 'ratione@jasper.info',
phone: '1-477-935-8478 x6430',
},
{
id: 7,
name: 'Ipsum placeat in r',
email: 'ipsum@jasper.info',
phone: '1-477-935-8478 x6430',
},
{
id: 8,
name: 'Omnis iste pariatur',
email: 'omnis@yesenia.net',
phone: '1-463-123-4447',
},
{
id: 9,
name: 'Quia pariatur Alias',
email: 'pariatur@kory.org',
phone: '493-170-9623 x156',
},
];
constructor() {}
public openPDF(): void {
let DATA: any = document.getElementById('htmlData');
html2canvas(DATA).then((canvas) => {
let fileWidth = 208;
let fileHeight = (canvas.height * fileWidth) / canvas.width;
const FILEURI = canvas.toDataURL('image/png');
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
PDF.save('angular-demo.pdf');
});
}
}
Then, add the following code to the app.component.html file.
<section>
<div id="htmlData">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of USERS">
<th>{{ user.id }}</th>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
</tr>
</tbody>
</table>
</div>
<div class="text-right">
<button class="btn btn-dark" (click)="openPDF()">Download PDF</button>
</div>
</section>
To launch the application in the browser, use the following command.
ng serve --open
