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';
   
@Component({
  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 };
    pdfMake.createPdf(documentDefinition).open(); 
     
  }
}

Don’t Miss : Convert HTML To Pdf Using JsPDF

Step 4: Update HTML File

src/app/app.component.html

<div class="container">
  <div id="pdfTable" #pdfTable>
    <h2>Angular HTML To PDF Generator Example - www.pakainfo.com</h2>
              
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>MemberName</th>
          <th>MemberProfileName</th>
          <th>Blogger</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Bhavika</td>
          <td>Pethani</td>
          <td>www.pakainfo.com</td>
        </tr>
        <tr>
          <td>Ridham</td>
          <td>Kakadiya</td>
          <td>www.infinityknow.com</td>
        </tr>
        <tr>
          <td>Rutvik</td>
          <td>Sidhapara</td>
          <td>www.w3diy.com</td>
        </tr>
      </tbody>
    </table>
  </div>
  <button class="btn btn-primary" (click)="generatedPDFFile()">Export To PDF</button>
</div>

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