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-appStep 3: Create component
Now, create two components one for set the cookie and other for get the cookie in different pages
ng g c HtmlToPdfMakethis 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 --saveStep 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-imageNow 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 :
As you can see its almost identical.
Now you can choose according to your need.
