Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to convert HTML to pdf in angular2?

I need to convert Dynamic generated html table in to pdf and able to print it too. I need it to be done in angular2 and Typescript.

like image 892
Munish Sharma Avatar asked Mar 10 '23 13:03

Munish Sharma


1 Answers

JSPDF works for angular 2. You need to download the definitions from dt~. Import the library as:

import * as jsPDF from "jspdf";
.
.
.

let doc = new jsPDF();

// Add a title to your PDF
doc.setFontSize(30); 
doc.text(12, 10, "Your Title");

// Create your table here (The dynamic table needs to be converted to canvas).
let element = <HTMLScriptElement>document.getElementsByClassName("pvtTable")[0];
html2canvas(element)
.then((canvas: any) => {
    doc.addImage(canvas.toDataURL("image/jpeg"), "JPEG", 0, 50, doc.internal.pageSize.width, element.offsetHeight / 5 );
    doc.save(`Report-${Date.now()}.pdf`);
})

In your system.js, in the map section add this line:

"jspdf": "<myLibs>/jspdf.js",
like image 113
Leonardo Venoso Avatar answered Mar 12 '23 11:03

Leonardo Venoso