Multiple Ways to Convert Html to PDF in Angular ?

There is multiple ways to convert HTML to PDF in angular, some are native and some are using the packages. While creating web application we need to manage to create PDF from the same html so in this tutorial i will show you multiple ways to create html to PDF.

There is no perfect package which can create exact same html to PDF but in native we can achieve one through print method of window but its has their own limitations too.

In this article i will use multiple packages to show you the different purpose and usage of packages.

Html to PDF using pdfmake and html-to-pdfmake package

In this method we will use three packages pdfmake, html-to-pdfmake and jspdf. pdfmake is a Client/server side PDF printing in pure JavaScript. pdfmake permits to easily create a PDF with JavaScript; however there is no support of HTML code, so html-to-pdfmake package handle this feature.

Let’s start it with example

Step 1 : Create an angular app

First step is to setup an angular app using below command

ng new example-app

Step 3: Create component

Now, create two components one for set the cookie and other for get the cookie in different pages

ng g c HtmlToPdfMake

this will create a folder html-to-pdf-make and src/app/html-to-pdf-make/html-to-pdf-make.component.html , src/app/html-to-pdf-make/html-to-pdf-make.component.ts file too as below

Step 3: Install pdfmake, html-to-pdfmake package

Install both packages using npm in project directory

npm install pdfmake @types/pdfmake html-to-pdfmake --save

Step 4: Update Component and template

We have installed the necessary packages now import packages in component and update html in template

import { Component, ElementRef, ViewChild,OnInit } from '@angular/core';
import * as pdfMake from "pdfmake/build/pdfmake";  
import * as pdfFonts from "pdfmake/build/vfs_fonts";  
declare var require: any;
const htmlToPdfmake = require("html-to-pdfmake");
(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-html-to-pdf-make',
  templateUrl: './html-to-pdf-make.component.html',
  styleUrls: ['./html-to-pdf-make.component.css']
})
export class HtmlToPdfMakeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @ViewChild('pdfTable')
  pdfTable!: ElementRef;
  
  public downloadAsPDF() {
    const pdfTable = this.pdfTable.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).download(); 
     
  }
}

and template

<div class="container">
    <div id="pdfTable" #pdfTable>
      <h2>Angular HTML To PDF Using PDFMAKE and htm-to-pdfmake Example - readerstacks.com</h2>
  
      <table class="table">
        <thead>
          <tr>
            <th>S.no.</th>
            <th>Name</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>Rem</td>
            <td>Rem@yopmail.com</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Joe</td>
            <td>joe@yopmail.com</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Kuple</td>
            <td>Kuple@yopmail.com</td>
          </tr>
        </tbody>
      </table>
    </div>
    <button class="btn btn-primary" (click)="downloadAsPDF();">Export To PDF</button>
  </div>

I also added the bootstrap to it so here is the output of html

As you can see this library not loading the proper css so this is the cons of this. you can read more about thease library here html-to-pdf-make and pdfmake.

Html to pdf using native APIs of javascript

Javascript also provides its own APIs to print pdf using

window.open( '', 'PRINT', 'height=650,width=900,top=100,left=150' )

Here is the example

import { Component, ElementRef, ViewChild,OnInit } from '@angular/core';
import * as pdfMake from "pdfmake/build/pdfmake";  
import * as pdfFonts from "pdfmake/build/vfs_fonts";  
declare var require: any;
const htmlToPdfmake = require("html-to-pdfmake");
(<any>pdfMake).vfs = pdfFonts.pdfMake.vfs;

@Component({
  selector: 'app-html-to-pdf-make',
  templateUrl: './html-to-pdf-make.component.html',
  styleUrls: ['./html-to-pdf-make.component.css']
})
export class HtmlToPdfMakeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @ViewChild('pdfTable')
  pdfTable!: ElementRef;
  
  public downloadAsPDF() {
    const pdfTable = this.pdfTable.nativeElement;
    var html = htmlToPdfmake(pdfTable.innerHTML);
    const documentDefinition = { content: html };
    pdfMake.createPdf(documentDefinition).download(); 
     
  }
}

Html to pdf using jsPdf and dom-to-image library

In this method we will create the image of Dom and then pass it to jsPdf, Pros of this library is we can archive almost same layout in pdf because we are passing image of dom by taking the screenshot.

So first install the packages

npm install dom-to-image jspdf  --save
npm i --save-dev @types/dom-to-image

Now in component

import { Component, ElementRef, ViewChild,OnInit } from '@angular/core';
import domtoimage from 'dom-to-image';
import  jsPDF from 'jspdf';

@Component({
  selector: 'app-html-to-pdf-make',
  templateUrl: './html-to-pdf-make.component.html',
  styleUrls: ['./html-to-pdf-make.component.css']
})
export class HtmlToPdfMakeComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

  @ViewChild('pdfTable')
  pdfTable!: ElementRef;
  
  public downloadAsPDF2() {
    // const pdfTable = this.pdfTable.nativeElement;
    // var html = htmlToPdfmake(pdfTable.innerHTML);
    // const documentDefinition = { content: html };
    // pdfMake.createPdf(documentDefinition).download(); 
     
  }
  public downloadAsPDF() {
    let div = this.pdfTable.nativeElement;
   
    var img:any;
    var filename;
    var newImage:any;


    domtoimage.toPng(div, { bgcolor: '#fff' })

      .then(function(dataUrl) {

        img = new Image();
        img.src = dataUrl;
        newImage = img.src;

        img.onload = function(){

        var pdfWidth = img.width;
        var pdfHeight = img.height;

          // FileSaver.saveAs(dataUrl, 'my-pdfimage.png'); // Save as Image

          var doc;

          if(pdfWidth > pdfHeight)
          {
            doc = new jsPDF('l', 'px', [pdfWidth , pdfHeight]);
          }
          else
          {
            doc = new jsPDF('p', 'px', [pdfWidth , pdfHeight]);
          }


          var width = doc.internal.pageSize.getWidth();
          var height = doc.internal.pageSize.getHeight();


          doc.addImage(newImage, 'PNG',  10, 10, width, height);
          filename = 'mypdf_' + '.pdf';
          doc.save(filename);

        };


      })
      .catch(function(error) {

       // Error Handling

      });
 
  }
}

OUTPUT :