How to Convert HTML into PDF in Angular 11?

Angular 11 HTML to pdf example. In this tutorial, you will learn how to implement an angular 11 generate pdf from html.

This tutorial will use pdfmake, html-to-pdfmake and jspdf package for generating pdf file from HTML. And will help you step by step on how to generate HTML to pdf angular 10/11 app.

Convert HTML into PDF in Angular 11?

  • Step 1 – Create New Angular App
  • Step 2 – Install Package
  • Step 3 – Add Code on View File
  • Step 4 – Add Code On Component ts File
  • Step 5 – Start Angular App

Step 1 – Create New Angular App

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

ng new my-new-app

Step 2 – Install Package

In this step, you need to install Package in our angular application. So, open your terminal and execute the following command:

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

Step 3 – Add Code on View File

In this step, create html and for display qr code in angular 11 ap. So, 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 - tutsmake.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 – Add Code On Component ts File

In this step, visit the src/app directory and open app.component.ts. Then 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 – Start Angular App

In this step, execute the following commands on terminal to start angular app:

ng serve

Recommended Angular Posts

Related Posts