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.
This article is originally posted over jsonworld
Top comments (4)
Hi Pankaj,
The above code works. But what if we need page breaks in the PDF? Will it generate PDF if it is a lengthy web page ?
You can refer the jsPDF website for further documentation, regarding your doubt, there's an function called addPage() for the instance of jsPDF class you create.
Got it....Thank you Arun
Hi Pankaj,
How to increase the font size for html content before converting it to image/pdf?