CODEWITHSUNDEEP
javascriptangularjsjspdf
Zlatoroh
Zlatoroh

Reputation: 147

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 ?

Upvotes: 1

Views: 14755

Answers (3)

Criss Andres Meneses
Criss Andres Meneses

Reputation: 11

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>

Upvotes: 1

trudesign
trudesign

Reputation: 117

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

Upvotes: 1

jp36
jp36

Reputation: 1918

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)

Upvotes: 2

Related Questions