Converting HTML into PDF Tutorial Example in Angular 11/12

In this tutorial, we will learn to convert HTML into PDF in the Angular 11/12 app. We will learn step by step how to implement the conversion of HTML into PDF using pdfmake, html-to-pdfmake and jspdf package.

Converting HTML into PDF Example in Angular 11/12

We simply need to follow the given steps for implementing the HTML conversion into PDF in Angular 11/12 app:

Step 1 is to Create the New Angular App

Step 2 is to Install the Package

Step 3 is to Add Code on View File

Step 5 is to Add Code On Component ts File

Step 6 is to Start the Angular App

Now, let’s learn in detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new convert-intopdf-app

Step 2 : Installing the Package

Next, we need to install the package in the angular app. Further, we open the terminal and execute the following command. 

npm install --save pdfmake
npm install html-to-pdfmake
npm install jspdf --save

Step 3: Adding the Code on View File

In next step, we create HTML and and for dispaly, qr code in Angular 11 app. Then, we visit src/app/app.component.html and update the following code into it:

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example - thecodemon.com</h2>
               
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Website</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sam</td>
          <td>Sam</td>
          <td>tutsmake.com</td>
        </tr>
        <tr>
          <td>john</td>
          <td>dam</td>
          <td>w3school.com</td>
        </tr>
        <tr>
          <td>jonhy</td>
          <td>hid</td>
          <td>geeks.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="downloadAsPDF()">Export To PDF</button>
</div>

Step 4: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts.  After this, we add the following code into component.ts file:

import { Component, ViewChild, ElementRef } from '@angular/core';
   
import jsPDF from 'jspdf';
import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
pdfMake.vfs = pdfFonts.pdfMake.vfs;
import htmlToPdfmake from 'html-to-pdfmake';
    
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'htmltopdf';
   
  @ViewChild('pdfTable') pdfTable: ElementRef;
   
  public downloadAsPDF() {
    const doc = new jsPDF();
    
    const pdfTable = this.pdfTable.nativeElement;
    
    var html = htmlToPdfmake(pdfTable.innerHTML);
      
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).open(); 
      
  }
}

Step 5: Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following commands on the terminal to start angular app:

ng serve

Conclusion

Finally, we reach the end of this tutorial in which we have comprehensively learnt about converting HTML into PDF using pdfmake. Hope that you have well understood the concept. 

Thanks