Convert HTML To PDF Using Angular 6

BrowSer link in .net core1
Introduction
Sometimes, we need to provide the important data of an application in the form of a document like a PDF or an image. Those times we need to convert the HTML layout into the document, and here, we are going to do the same task to convert the HTML into PDF.
I went through many links but was unable to find a quick solution. In the end, I found a JavaScript named JSPDF.
You can find their official documentation here.
And also, I have used another npm package named  html2canvas, which is used to convert the HTML into Canvas and then, we can put the image files into our pdf document. For that, we need to download their dependencies.
Just use the below npm commands.

 

npm install jspdf

 

And to install html2canvas package, use given npm command.

 

npm install html2canvas

 

When we are done with the installation part, it’s time to import it into our component using the import statement.


import * as jspdf from 'jspdf'; 

import html2canvas from 'html2canvas';

Now, it’s time to design the user interface. Open app.component.html and paste the below code snippet.

<div id="content">

<div class="alert alert-info">
<strong>Html To PDF Conversion - Angular 6</strong>
</div>
<div>

</div>

</div>
<div>

<table id="contentToConvert">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 1</td>
<td>Row 1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Row 2</td>
<td>Row 2</td>
</tr>
<tr>
<td>Row 3</td>
<td>Row 3</td>
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
<tr>
<td>Row 5</td>
<td>Row 5</td>
<td>Row 5</td>
</tr>
<tr>
<td>Row 6</td>
<td>Row 6</td>
<td>Row 6</td>
</tr>
</table>

</div>

You can see in the above code that I have designed a simple HTML table to simplify this example. Do not confuse this with <mat-> tags, I have used Angular Material component to make my user interface look good. When we are done with our UI part, let’s run our application and see that output.

manav1.png
I have used a capture button to generate the PDF of an HTML table. So, when I click the Capture button, it will generate a PDF in A4 size of paper. Now, open app.component.ts file and write the method as described below.

import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';
import * as jspdf from 'jspdf';
import html2canvas from 'html2canvas';

@Component({
selector: 'app-htmltopdf',
templateUrl: './htmltopdf.component.html',
styleUrls: ['./htmltopdf.component.css']
})
export class HtmltopdfComponent{
public captureScreen()
{
var data = document.getElementById('contentToConvert');
html2canvas(data).then(canvas =&gt; {
// 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('MYPdf.pdf'); // Generated PDF
});
}
}

As you can see in the above code snippet, I have created one method called captureScreen(), which generates a document and will add an image into the document and lastly, will save it on a local system.
For that, I have provided a few settings, like image height, width, left margin etc.
JsDF has a syntax which decides its layout when it generates the PDF.

new JsPDF(
Orientation, // Landscape or Portrait

unit, // mm, cm, in

format // A2, A4 etc
);

After initialization of JsPDF, I am going to put the image into my document, using pdf.addImage(), which is used to use the image into our document.
Other similar methods are given below.
  • addHTML()
  • addFont()
  • addPage()
  • addMetaData()
Now, it’s time to execute our application using ng serve -o command, and see the expected output.
manav2

Conclusion

This is how we can convert our HTML code into PDF format, including font settings, images, metadata etc. For more functionalities, you can refer their official documentation.
Follow my other blogs in Angular.
If you have any doubts, feel free to ask me via comments. Thanks for reading.
Advertisements

2 thoughts on “Convert HTML To PDF Using Angular 6

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s