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>

have checked stackoverflow: http://stackoverflow.com/a/18490056/1635676 — Touqeer Shafi, Oct 30 '15 at 13:15

score 0 · Answer 1 · answered Oct 30 '15 at 13:01

0

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.

answered Oct 30 '15 at 13:01

Rob

4,927
4
26
41

Error is occurring inside the jsPDF library. while (i < table.rows.length) { tableRow = table.rows[i]; rowData = {}; j = 0; while (j < tableRow.cells.length) { rowData[headers[j].name] = tableRow.cells[j].textContent.replace(/\r?\n/g, '');-----error occur here(Cannot read property 'name' of undefined)---- j++; } data.push(rowData); i++; } – Dheeraj Kumar Nov 02 '15 at 03:58
replace ("#spnorderno").text() with any "name" – Dheeraj Kumar Nov 02 '15 at 04:27
Looks like you need the name attribute in the row headers – Rob Nov 02 '15 at 11:32
can i download with without adding name attribute? – Dheeraj Kumar Nov 03 '15 at 04:33
... what? Try opening the page. Does it open? Then its downloaded. – Rob Nov 03 '15 at 08:42
which page? Can please give me an example in which we convert div and table in pdf. try to give that example in which we have more than one table and div. – Dheeraj Kumar Nov 03 '15 at 13:19
Ok. can you provide me a example of html to pdf convertion using ajax request in wkhtmltopdf. – Dheeraj Kumar Nov 09 '15 at 09:19

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

1 Answers1