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.
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.
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'); }); 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.
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;"
function() ins't executing. The canvas is being rendered but the pdf.save() isn't being called.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'); 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; } 