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.
  1. npm install jspdf
And to install html2canvas package, use given npm command.
  1. npm install html2canvas
When we are done with the installation part, it's time to import it into our component using the import statement.
  1. import * as jspdf from 'jspdf';
  3. import html2canvas from 'html2canvas';
Now, it's time to design the user interface. Open app.component.html and paste the below code snippet.
  1. <div id="content" #content>
  2. <mat-card>
  3. <div class="alert alert-info">
  4. <strong>Html To PDF Conversion - Angular 6</strong>
  5. </div>
  6. <div>
  7. <input type="button" value="CPTURE" (click)="captureScreen()"/>
  8. </div>
  9. </mat-card>
  10. </div>
  11. <div >
  12. <mat-card>
  13. <table id="contentToConvert">
  14. <tr>
  15. <th>Column1</th>
  16. <th>Column2</th>
  17. <th>Column3</th>
  18. </tr>
  19. <tr>
  20. <td>Row 1</td>
  21. <td>Row 1</td>
  22. <td>Row 1</td>
  23. </tr>
  24. <tr>
  25. <td>Row 2</td>
  26. <td>Row 2</td>
  27. <td>Row 2</td>
  28. </tr>
  29. <tr>
  30. <td>Row 3</td>
  31. <td>Row 3</td>
  32. <td>Row 3</td>
  33. </tr>
  34. <tr>
  35. <td>Row 4</td>
  36. <td>Row 4</td>
  37. <td>Row 4</td>
  38. </tr>
  39. <tr>
  40. <td>Row 5</td>
  41. <td>Row 5</td>
  42. <td>Row 5</td>
  43. </tr>
  44. <tr>
  45. <td>Row 6</td>
  46. <td>Row 6</td>
  47. <td>Row 6</td>
  48. </tr>
  49. </table>
  51. </mat-card>
  52. </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.
Angular
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.
  1. import { Component, OnInit, ElementRef ,ViewChild} from '@angular/core';
  2. import * as jspdf from 'jspdf';
  3. import html2canvas from 'html2canvas';
  5. @Component({
  6. selector: 'app-htmltopdf',
  7. templateUrl: './htmltopdf.component.html',
  8. styleUrls: ['./htmltopdf.component.css']
  9. })
  10. export class HtmltopdfComponent{
  11. public captureScreen()
  12. {
  13. var data = document.getElementById('contentToConvert');
  14. html2canvas(data).then(canvas => {
  15. // Few necessary setting options
  16. var imgWidth = 208;
  17. var pageHeight = 295;
  18. var imgHeight = canvas.height * imgWidth / canvas.width;
  19. var heightLeft = imgHeight;
  21. const contentDataURL = canvas.toDataURL('image/png')
  22. let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
  23. var position = 0;
  24. pdf.addImage(contentDataURL, 'PNG', 0, position, imgWidth, imgHeight)
  25. pdf.save('MYPdf.pdf'); // Generated PDF
  26. });
  27. }
  28. }
As you can see in the above code snippet, I have created one method called captureScreen(), which generates document and will add 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 that decides its layout when it generates the PDF.
  1. new JsPDF(
  2. Orientation, // Landscape or Portrait
  4. unit, // mm, cm, in
  6. format // A2, A4 etc
  7. );
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.
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 to their official documentation.
Follow my other blogs in Angular.
If you have any doubts, feel free to ask me via comments. Thanks for reading.