CODEWITHSUNDEEP
javascriptjspdf
vinesh
vinesh

Reputation: 4913

jsPDF: addHTML method not working

I created html table and tried to generate pdf using jsPDF.

I have used following code: 

var pdf = new jsPDF('p','pt','a4');  
pdf.addHTML(document.getElementById('pdfTable'),function() {
  console.log('pdf generated');
});
pdf.save('pdfTable.pdf');

I am getting blank pdf file. Am I doing anything wrong?

Here is a plunker for this.

Working demo of jsPDF with addHTML function.

Upvotes: 3

Views: 26740

Answers (6)

Hardik Chaudhary
Hardik Chaudhary

Reputation: 1228

I have test this in your plunker.

Just update your app.js

pdf.addHTML(document.getElementById('pdfTable'), function() {
      pdf.save('pdfTable.pdf');
});

update your css file:

#pdfTable{
  background-color:#fff;
}

Upvotes: 0

Vinicius Rodrigues
Vinicius Rodrigues

Reputation: 19

Instead of using the getElementById() you should use querySelector()

var pdf = new jsPDF('p','pt','a4');  
pdf.addHTML(document.querySelector('#pdfTable'), function () {
  console.log('pdf generated');
});

pdf.save('pdfTable.pdf');

Upvotes: 0

JCristobal
JCristobal

Reputation: 25

In app.js change:

  pdf.addHTML(document.getElementById('pdfTable'),function() {

  });
  pdf.save('pdfTable.pdf');

to

  pdf.addHTML(document.getElementById('pdfTable'),function() {
      pdf.save('pdfTable.pdf');
  });

If you see a black background, you can add to sytle.css "background-color: white;"

Upvotes: 0

Aks
Aks

Reputation: 8301

Made working plunker for this: Update: I have updated the plunker and made it work with addHTML() function:

var pdf = new jsPDF('p','pt','a4');
//var source = document.getElementById('table-container').innerHTML;
console.log(document.getElementById('table-container'));
var margins = {
   top: 25,
   bottom: 60,
   left: 20,
   width: 522
};
// all coords and widths are in jsPDF instance's declared units
// 'inches' in this case
pdf.text(20, 20, 'Hello world.');
pdf.addHTML(document.body, margins.top, margins.left, {}, function() {
   pdf.save('test.pdf');
});

You can see plunker for more details.

Upvotes: 2

Wasskinny
Wasskinny

Reputation: 77

I took out everything but these:

<script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script src="//html2canvas.hertzen.com/build/html2canvas.js"></script>

then I used this:

  $(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');

    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("rentals.pdf");
    });
    });
});

I can print the table... looks great with chrome, safari or firefox, however, I only get the first page if my table is very large.

Upvotes: 1

Morcilla de Arroz
Morcilla de Arroz

Reputation: 2182

Change this in app.js:

  pdf.addHTML(document.getElementById('pdfTable'),function() {
      });
  pdf.save('pdfTable.pdf');

for this one:

pdf.addHTML(document.getElementById('pdfTable'),function() {
    pdf.save('pdfTable.pdf');
});

Upvotes: 1

Related Questions