Using addHTML function from jsPDF in AngularJS

Problem

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 ?

Problem courtesy of: Zlatoroh

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)

Solution courtesy of: jp36

Discussion

   function HTMLtoPDF(){    

Try this code (Class name: "pdfFromHTML.js"):

html2canvas(document.body, {
    onrendered: function(canvas) {
        var imgData = canvas.toDataURL('image/png');
        var doc = new jsPDF('p', 'mm', 'a4');
        var position = 0;
        doc.addImage(imgData, 'PNG', 20, 20);
        doc.save('Test.pdf');           
    }
 });
}

You need this libraries:

<script src="js/jspdf.js"></script>
<script src="js/html2canvas.js"></script>
<script src="js/pdfFromHTML.js"></script> /* Call the class */

and you can put a button:

<button class="btn btn-primary" onclick="HTMLtoPDF()">Save</button>
Discussion courtesy of: Criss Andres Meneses

Here's my code,

$scope.printDocument = function(){
  var pdf = new jsPDF('p','pt','a4');
  pdf.addHTML(document.body,  function() {
    pdf.save('web.pdf');
  });
}

I Have html2Canvas required in my service app.js, I can see that there is an addHTML function on the PDF object but it never gets into that callback function, and no errors in the console.

It appears jsPDF.addHTML doesn't get into the options.onrendered function. Trying to track through it, will update here if I find anything.

EDIT FIXED: I had installed html2canvas via npm, and had it set require in my app.js file (angular app), but it wasn't working. I then discovered 0.4.1 html2Canvas is available for bower install. Once I added that (have both loaded, too timid to remove the npm version) it works fine. Huzzah!.

Discussion courtesy of: trudesign

This recipe can be found in it's original form on Stack Over Flow.