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

  

    
Angular HTML To PDF Generator Example - www.pakainfo.com
              
    

      

        

          
MemberName
          
MemberProfileName
          
Blogger
        
      
      

        

          
Bhavika
          
Pethani
          
www.pakainfo.com
        
        

          
Ridham
          
Kakadiya
          
www.infinityknow.com
        
        

          
Rutvik
          
Sidhapara
          
www.w3diy.com
        
      
    
  
  Export To PDF

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.