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... (/, / ->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 ?

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/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 ?

• javascript
• angularjs
• jspdf

• Yes this helped, but at the end I gave up. And made printout with CSS styles, It's not prfect but it work pretty good. Thank you for your help. – Zlatoroh Commented Dec 1, 2015 at 7:33

3 Answers 3

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./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./MrRio/jsPDF/issues/270)

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!.

function HTMLtoPDF(){   
        //Try this code (Class name: "pdfFromHTML.js"): since the code format important im changing this

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>