How to convert HTML to pdf in angular2?

Question

I need to convert a dynamic generated html table to pdf and it can be printed. I need this to be done in angular2 and Typescript.

Answer 1

JSPDF works for angular 2. You need to load 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`);
})

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

"jspdf": "<myLibs>/jspdf.js",

Answer 2

npm HTML- PDF. , . Kendo UI Angular PDF Export. Kendo Angular , . , , , , , . .

, HTML- PDF Kendo UI Angular export npm.

.

npm install --save @progress/kendo-angular-pdf-export @progress/kendo-drawing

Angular 6 rxjs-compat. Angular 6.

npm install --save rxjs-compat @6

Angular 5 RxJS v5. 5+.

npm install --save rxjs@^5.5

PDFExportModule .

import { NgModule } from '@angular/core'; 

import { BrowserModule } from '@angular/platform-browser'; 

import { PDFExportModule } from '@progress/kendo-angular-pdf-export'; 

import { AppComponent } from './app.component';  



@NgModule({ 

bootstrap:[AppComponent],   

declarations: [AppComponent],    

imports:BrowserModule, PDFExportModule] }) 


export class AppModule { } 

, , https://www.stackquery.com/articles/how-to-generate-pdf-in-angular-with-repeated-headers-images-and-watermark/75.

, .

. , jsPDF npm. , PDF 200 .