Create and download pdf from div on angular 2

Question

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?

Solution

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.

Comments

[Joffrey Hernandez]

Thank you for your help. I got this error : "Error in ./DetailDevisComponent class DetailDevisComponent - inline template:14:24 caused by: self._el_33 is not a function"

[Poul Kruijt]

@JoffreyHernandez can you update your answer to show your entire DetailDevisComponent?

[Joffrey Hernandez]

If you want to take a look i just add a Plunker link. Thank you

[Joffrey Hernandez]

Wow thank you. This is better but the content of pdf does not have the text inside div. Any idea ?

[Poul Kruijt]

@JoffreyHernandez I've updated the plunkr link. Apparently you have to force a white background, otherwise it defaults to black :)

[Vignesh]

@PierreDuc i am trying to download an PDF from an existing div with jspdf it contains radiobuttons,checkbox,dropdown EX : <input name="sex" type="checkbox" [(ngModel)]="Male" /> it show's black color

[Vignesh]

@PierreDuc i need to download pdf format using angular controls like checkbox,radiobutton,dropdown. If i add checkbox control in html means it's not showing in pdf

[Jayani Sumudini]

@PierreDuc I saved html table as pdf successfully..but colors in the html page and colors in the pdf doesn't match.

[Anuj]

i am getting ERROR ReferenceError: jsPDF is not define in angular 5 project