使用jsPDF或javascript在HTML页面中以pdf格式下载div

Question

我要做的就是将div中ID为“ pdf”的任何内容打印为pdf。 这必须使用JavaScript来完成。 然后，我将使用jsPDF脚本自动下载文件名为“ foobar.pdf”的“ pdf”文档。它会引发“未捕获的TypeError：无法读取未定义的属性'name'”

例外[在此处输入链接描述] [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

您是否检查了$（“＃spnorderno”）。text（）返回的内容？ 那可能是不确定的。

除此之外，您应该张贴引发错误的确切位置，这很可能在jsPDF库中发生。