4

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.

Munish Sharma
  • 151
  • 3
  • 7
  • 1
    Possible duplicate of [Generate PDF file from html using angular2/typescript](http://stackoverflow.com/questions/38996376/generate-pdf-file-from-html-using-angular2-typescript) – Koby Douek Mar 20 '17 at 09:49
  • Have a look at jsPDF. – Arg0n Mar 20 '17 at 09:52
  • I have checked JsPDF it works with angular1 not with angular2. Can you show me something in plunker where we can convert HTML to pdf. I need to convert the HTML table with ID to pdf and print it. – Munish Sharma Mar 20 '17 at 10:21
  • It does work in angular 2. You need to get the `typings` for it of course. – Arg0n Mar 20 '17 at 11:23

1 Answers1

7

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",
Leonardo Venoso
  • 1,203
  • 12
  • 15