How To Convert HTML Page To PDF In Angular Application

    May 07, 2018       by Pankaj Kumar

As a developer, Many times we get the requirement to convert HTML content to save in image format or in pdf format for sending as report to users email. So, here I am going to explain about converting HTML content into PDF file in angular application. For the task, I will use NPM package, jspdf.

 

Let's Get Started

Step 1: Create an angular app using CLI

Create an angular app with below command and move into the project folder,

ng new angular-to-pdf

cd angular-to-pdf

 

Step 2: Install dependencies:

As discussed earlier, Going to install the other dependency library needed

npm install jspdf

npm install html2canvas

 

Step 3: update app.component.ts file

We need to update the ts file to perform the required task, So open the app.component.ts file and put below code:

 

 
import { Component, OnInit, ElementRef ,ViewChild} 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-angular-application';
public convetToPDF()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas => {
// Few necessary setting options
var imgWidth = 208;
var pageHeight = 295;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
 
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
pdf.save('new-file.pdf'); // Generated PDF
});
}
}
 

 

In the above file, At the top we have imported the jspdf and html2canvas library in our ts file. Below that we have a method which we will call on button click from html file, With in the method we are getting the content from the id contentToConvert and converting it to the pdf file.

 

Step 4: Update app.component.html file

 

<!--The content below is only a placeholder and can be replaced.-->
<div>
<strong>Html To PDF in Angular Application</strong>
</div>
<div>
<input type="button" value="Convert" (click)="convetToPDF()"/>
</div>
 
<pre>
<div id="content">
<div></div>
</div>
<div>
<table id="contentToConvert">
<tbody>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</tbody>
</table>
</div>
</pre>

 

 

In the above file, We have a dummy content in tabular form which will be converted into pdf file and a button at the top on clicking which request is passing for pdf file creation.

 

Step 5: Run the app

After completing all the needed steps, Run the app with below command

ng serve

 

Check the app over browser after running the above command.

 

Conclusion

So in this demo, We learn to convert HTML content into image. You can find other demos of Angular Sample Projects

That’s all for now. Thank you for reading and I hope this demo will be very helpful to convert HTML content to pdf file.

Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

 

You can download complete code from here. Download Code

angular html2pdf

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch

Find other similar Articles here:

WHAT'S NEW

image
JavaScript Complete Guide in Hindi(Free Tutorial)

Click to Watch
CATEGORIES
INTERVIEW QUESTIONS