Angular 9 HTML2PDF.js Tutorial to Convert HTML Table to PDF in Typescript Full Project For Beginners



Angular 9 Convert HTML to PDF Using html2pdf.js Library Full Project 2021 video

In order to get started you need to install the below library using the npm command


npm i html2pdf.js



After installing this library you need to copy paste the below code into app.component.html file inside your angular project






<!DOCTYPE html>
<html lang="en">
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="">
  <script src=""></script>
  <script src=""></script>

<div class="container">
  <h2>Striped Rows</h2>
  <p>The .table-striped class adds zebra-stripes to a table:</p>            
  <table id="table" class="table table-striped">
<button (click)="download()">Download PDF</button>



Now copy paste the below code to app.component.ts file as shown below






import { Component } from "@angular/core";
import * as html2pdf from 'html2pdf.js';

  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
export class AppComponent {
    var element = document.getElementById('table');
var opt = {
  margin:       1,
  filename:     'myfile.pdf',
  image:        { type: 'jpeg', quality: 0.98 },
  html2canvas:  { scale: 2 },
  jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
// New Promise-based usage:



Leave a Reply