Download a div in a HTML page as pdf using jsPDF or javascript

Question

All I want to do is to print to pdf whatever is found in the div with an id of "pdf". This must be done using JavaScript. The "pdf" document should then be automatically downloaded with a filename of "foobar.pdf" I am using jsPDF script.It throws "Uncaught TypeError: Cannot read property 'name' of undefined"

exception[enter link description here][1]

  function demoFromHTML() { debugger; var pdf = new jsPDF('p', 'pt', 'letter'); source = $('#divInvoice')[0]; var Name = $("#spnorderno").text(); specialElementHandlers = { '#editor': function (element, renderer) { return true } }; margins = { top: 80, bottom: 60, left: 40, width: 522 }; pdf.fromHTML( source, margins.left, margins.top, { 'width': margins.width, 'elementHandlers': specialElementHandlers }, function (dispose) { pdf.save('Invoice'+Name+'.pdf'); }, margins); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="http://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script> <div style="width:800px; border-top:5px solid #1dbbe3; margin:0px auto; padding:25px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; border-right:1px solid #ccc; font-family: Arial; font-size:13px; font-weight:normal; text-decoration:none; line-height:19px;"> <div class="printBox"> <table width="100%" style="margin-bottom:30px;"> <tr> <td align="left" valign="middle">LOGO</td> <td align="right" valign="middle" style="font-size:20px;">LAB</td> </tr> <tr> <td align="left" valign="middle" height="60"><span style="color:#757575;">Address:</span><br> <span>INDIA</span></td> <td align="right" valign="top"><span style="color:#757575;">Address:</span><br> <span>INDIA</span></td> </tr> <tr> <td align="left" valign="middle"><span style="color:#757575;">Contact No.:</span> <br> <span>+000000000000</span></td> <td align="right" valign="middle"><span style="color:#757575;">Contact No.:</span> <br> <span>+000000000</span></td> </tr> </table> <table width="100%" style="border-top:3px solid #ccc; margin-top:15px;"> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;"><span style="color:#757575;">Patient name:</span> <span style="color:#1dbae3; font-weight:bold;">Rahul Kumar Sharma</span></td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;"><span style="color:#757575;">Age:</span> <span>25 year</span></td> </tr> <tr> <td style="padding: 7px 0 20px;"><span style="color:#757575;">Gender: </span><span>male</span></td> </tr> </table> <table width="100%" style="border-top:3px solid #ccc; margin-top:15px;" cellpadding="0" cellspacing="0"> <tr> <td style="border-bottom:1px solid #ccc;padding: 15px 0 12px; font-size:16px;" colspan="3" align="left">Order No: <span style="color:#fe8534;">O1500002200</span></td> <td style="border-bottom:1px solid #ccc;padding: 15px 0 12px;" colspan="2" align="right"><span style="color:#757575;">Order Date:</span> 28 October 2015 11:07AM</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px; font-weight:bold;" width="7%" align="left">S. No.</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px; font-weight:bold;" colspan="3" align="left">Investigations</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px; font-weight:bold;" width="19%" align="right" valign="middle">Amount</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="left" valign="middle">1</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" colspan="3" align="left" valign="middle">Senior Citizen Package Male</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 2000</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="left" valign="middle">2</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" colspan="3" align="left" valign="middle">Senior Citizen Package Male</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 2000</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="left" valign="middle">3</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" colspan="3" align="left" valign="middle">Senior Citizen Package Male</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 2000</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="left" valign="middle">4</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" colspan="3" align="left" valign="middle">Senior Citizen Package Male</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 2000</td> </tr> <tr> <td colspan="5"><table width="100%" cellpadding="0" cellspacing="0"> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px; font-weight:bold;" width="82%" align="right" valign="middle">Sub Total:</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px; font-weight:bold;" width="18%" align="right" valign="middle">Rs. 12000</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Discount:</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 12000</td> </tr> <tr> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Promo Discount:</td> <td style="border-bottom:1px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Rs. 12000</td> </tr> <tr> <td style="border-bottom:3px solid #ccc;padding: 6px 0 8px;" align="right" valign="middle">Your Price:</td> <td style="border-bottom:3px solid #ccc;padding: 10px 0 10px; font-size:19px;" align="right" valign="middle"><b>Rs. 12000</b></td> </tr> </table></td> </tr> </table> </div> <div class="printBtnBox" style="margin-top: 25px;"> <a href="#" style="background:#1dbae3; padding: 8px 20px; border-radius:3px; color:#fff; text-decoration:none; font-size:16px;" onclick='demoFromHTML()'>Download</a> </div> </div> 

Answer 1

Did you check what $("#spnorderno").text() returns? That is probably undefined.

Other than that you should post the exact place the error was thrown, this could very well be happening inside the jsPDF library.