使用jsPDF或javascript将HTML页面中的div作为pdf下载

时间:2015-10-30 12:17:15

标签: javascript jquery html css jspdf

我想做的就是打印到pdf中找到的任何ID为" pdf"的内容。这必须使用JavaScript完成。 " pdf"然后应该自动下载文件,文件名为" foobar.pdf" 我正在使用jsPDF脚本。它抛出"未捕获的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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

您检查了$(“#spnorderno”)。text()返回的内容吗?这可能是未定义的。

除此之外,你应该发布错误引发的确切位置,这很可能发生在jsPDF库中。