angular html to pdf – How to Convert HTML into PDF in Angular 11?

angular html to pdf – Angular 12/11 Convert HTML into PDF Tutorial with Example using npm install –save pdfmake, npm install html-to-pdfmake and npm install jspdf –save Installing Packages.

angular html to pdf – Generate PDF From HTML In Angular

Step 1: Create New App

ng new myNewApp

Step 2: Install Packages

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

Step 3: Update Ts File – src/app/app.component.ts

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';
  selector: 'pakainfo-blog',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'htmltopdf';
  @ViewChild('pdfTable') pdfTable: ElementRef;
  public generatedPDFFile() {
    const doc = new jsPDF();
    const pdfTable = this.pdfTable.nativeElement;
    var result = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: result };

Don’t Miss : Convert HTML To Pdf Using JsPDF

Step 4: Update HTML File


<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example -</h2>
    <table class="table table-bordered">
  <button class="btn btn-primary" (click)="generatedPDFFile()">Export To PDF</button>

I hope you get an idea about angular html to pdf.
I would like to have feedback on my
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.