最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Using addHTML function from jsPDF in AngularJS - Stack Overflow

programmeradmin1浏览0评论

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 ?

Share Improve this question asked Oct 22, 2015 at 10:33 ZlatorohZlatoroh 1472 gold badges5 silver badges17 bronze badges 1
  • 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
Add a ment  | 

3 Answers 3

Reset to default 2

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>
发布评论

评论列表(0)

  1. 暂无评论