Create and download pdf from div on angular 2

问题:

I'm trying to create and download an PDF from an existing div with jsPDF.

I have tried many ways but I can't achieve it.

My last try was with @ViewChild and ElementRef but doesn't work to.

detail-devis.component.ts:

import {Component, ElementRef, ViewChild} from "angular2/core"; declare let jsPDF;   @Component({ selector: 'my-app', template: `<div #test>     Hello world   </div>   <button type="button" (click)="test()">pdf</button>   <button (click)="download()">download</button>` })  export class App {    @ViewChild('test') el: ElementRef;    constructor() {   }    public download() {     var doc = new jsPDF();     doc.text(20, 20, 'Hello world!');     doc.save('Test.pdf');   }    public test() {     let pdf = new jsPDF('l', 'pt', 'a4');     let options = {       pagesplit: true     };     pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {       pdf.save("test.pdf");     });   } } 

Plunker

Someone know the simplest way to achieve this with Angular 2?

回答1:

I guess the problem is that ViewChild gives you an ElementRef which is an angular class. You should get the nativeElement of this object to get the actual HtmlElement:

@ViewChild('test') el:ElementRef;   createPdf(): void {    let pdf = new jsPDF('l', 'pt', 'a4');    let options = {       pagesplit: true    };    pdf.addHTML(this.el.nativeElement, 0, 0, options, () => {       pdf.save("test.pdf");    }); } 

In your plunkr you use the name test for a method name. Apparently angular doesn't like that. You need to rename that. After that you will encounter the problem that you are missing a library:

You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js

Add one of these to your project, and it should work. Note though that the function addHtml is deprecated

I've made a working plunkr, where I added html2canvas.

文章来源: Create and download pdf from div on angular 2