In this article, we will learn how to convert HTML to PDF in Angular 9.
Prerequisites:
- Basic knowledge of Angular
- Code editor like Visual Studio Code
Create a new Angular project by typing the following command in the VSCode terminal.
ng new html-to-pdf
Now, open the newly created project and execute the commands given below.
npm install html2canvas npm install jspdf
html2canvas
The script allows you to take “screenshots” of webpages or parts of it, directly on the user’s browser. The screenshot is based on the information available on the page.
jspdf
Generate PDF files in client-side JavaScript.
Open the app.component.html file and add the code in it.
<h1>HTML to PDF in Angular 9</h1> <button (click)="generatePDF()">Generate PDF</button> <table id="contentToConvert" border="1" width="100%"> <tbody> <tr> <th>ID</th> <th>Article</th> <th>Technology</th> <th>Author</th> </tr> <tr> <td>1</td> <td>Star Rating In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>2</td> <td>TypeAhead With Custom Result Template In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>3</td> <td>Circular Progress Bar In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>4</td> <td>Display Loader/Spinner On Each HTTP Calls In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>5</td> <td>Form Validation In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>6</td> <td>Building Responsive Carousel Slider In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>7</td> <td>How To Implement Lazy Loading Module In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> <tr> <td>8</td> <td>Separate Development And Production URL In Angular 9</td> <td>Angular</td> <td>Yasin</td> </tr> </tbody> </table>
Open the app.component.ts file and add the code in it.
import { Component } from '@angular/core'; import * as jspdf from 'jspdf'; import html2canvas from 'html2canvas'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'html-to-pdf'; generatePDF() { var data = document.getElementById('contentToConvert'); html2canvas(data).then(canvas => { var imgWidth = 208; var imgHeight = canvas.height * imgWidth / canvas.width; const contentDataURL = canvas.toDataURL('image/png') let pdf = new jspdf('p', 'mm', 'a4'); var position = 0; pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight) pdf.save('newPDF.pdf'); }); } }
Output:
When you hire Angular developers in India, you get a lot of advantages. Hire our Angular developers to create a competitive e-commerce app for you. At Angular Minds, we offer a variety of exceptional services from our team of highly motivated and devoted Angular Developers who are known for creating engaging web applications that help you achieve your business objectives.
Please give your valuable feedback and if you have any questions or issues about this article, please let me know.
Also, check Star Rating In Angular 9
The downloaded file doesn’t show any content in it. A blank pdf is downloaded.
In which angular version you are getting this issue?
I am Facing issue with Images. Text and everything fetching to PDF. but Images are not showing in PDF.
Hi, were you able to show images on PDF?
To fix this issue you must have to use Base64 of your image in src.
I Want this generated PDF to sent as attachment along with email using Nodemailer ?
Please help with code. Quite urgent .
Does this work when there is a long page( page with scroll)
yes it will!
When I am trying to convert a long page, I was only able to download one page filled up. The rest of it is cut off. Can we download multiple pages PDf when the html content is long
Hi Yasin Panwala, this works for me. How do you specify the directory on the local computer to save the pdf file created? Am developing PWA using ionic 5