Converting HTML into PDF Tutorial Example in Angular

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 packages.

Converting HTML into PDF Example in Angular

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

Step 1 – Create the New Angular App

Step 2 – Install the Package

Step 3 – Add Code on View File

Step 5 – Add Code On Component ts File

Step 6 – Start the Angular App

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 for display, QR code in the Angular 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 - FreakyJolly</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 to the app.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 the 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.

Category: Angular