Search code examples
javascriptangularjsjspdf

Using addHTML function from jsPDF in AngularJS

I'm trying to create custom printout in my application using jsPDF plugin. Applicaiton uses AngularJs frame work. I tried many different example codes but nothing works... (http://jsfiddle.net/rpaul/p4s5k59s/5/, http://mrrio.github.io/jsPDF/ ->addHtml, ...).

My code:

Plugins loads:

...resolve: {
            loadPlugin: function ($ocLazyLoad) {
                return $ocLazyLoad.load([
                    {
                        serie: true,
                        name: 'Chart',
                        files: [ 'src/plugins/html2canvas.js', 'src/plugins/jsPDF/jspdf.debug.js']...

Button that triggers the action:

<button type="button" class="btn btn-w-m btn-success" ng-click="x21ot.printDocument()">Print</button>

And the called function:

    this.printDocument = function(){
        var pdf = new jsPDF('p','pt','a4');
         pdf.addHTML($("#chart1"),function() {
             pdf.save('web.pdf');
         });
    }

When the action is called nothing happens. I tried different output method : doc.output('dataurlnewwindow'); but it does not work.

I have debugged addHTML function and found there is onrender event that never triggers.

Is this an Angular problem or am I doing something wrong ?

Solution

  • I was having this same problem, I was able to fix it by including html2canvas.

    npm install html2canvas --save

    //Since I'm using browserify I then ran
global.html2canvas = require("html2canvas");

    (https://github.com/niklasvh/html2canvas)

    jsPDF relies on that for the addHTML function, but I never saw that mentioned anywhere on the site until I found a bug report about it (https://github.com/MrRio/jsPDF/issues/270)