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.
</pre> <div id="content"> <div class="alert alert-info"><strong>Html To PDF Conversion - Angular 6</strong></div> <div></div> </div> <div> <table id="contentToConvert"> <tbody> <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> </tbody> </table> </div> <pre>
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.
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 => {
// 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.
JsPDF 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.
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.
Neel Bhatt 
Thanks for this post. I am using the html canvas but i am facing issues with it. Please check my issue here:
https://github.com/niklasvh/html2canvas/issues/1720
Let me know if you can suggest something. I am not sure what i am missing
LikeLike
Hi Neel,
Thanks for your article!
Is this possible to handle if the table with more than 1000 rows?
I need to print 50 or 100 rows per page.
LikeLike
yes we can generate multiple pages PDF as well
LikeLike