CODEWITHSUNDEEP
javascriptjqueryhtmljspdf
Akshay Arora
Akshay Arora

Reputation: 1945

Element is undefined error in jsPDF

I am trying to make an app in which the user can download a certain table as PDF. I am trying to use jsPDF for the purpose but due to some reasons or other , it is not working. The latest error which I am getting in the console is TypeError: element is undefined in the file jspdf.plugin.from_html.js .

Here is my approach:

I have the following headers:

<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>

One thing that may be noted here is the fact that My table is populated dynamically from values provided by my backend during the page load itself

The table looks like:

<div id="huh">

<table class="table table-hover table-bordered" id="recent">
    <thead>
        <tr>
            <th>
            Spent On
            </th>
            <th>
            Amount
            </th>
        </tr>
    </thead> 

</table>
    </div>

The table contains actual data when I invoke the following script: 

<script type="text/javascript">

     function demoFromHTML() {
         var doc = new jsPDF('p', 'in', 'letter');
         var source = document.getElementById('huh');
         var specialElementHandlers = {
             '#bypassme': function(element, renderer) {
                 return true;
             }
         };

         doc.fromHTML(
            $('#testcase').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
             0.5,    // x coord
             0.5,    // y coord
             {
                 'width': 7.5, // max width of content on PDF
                 'elementHandlers': specialElementHandlers
             });

         doc.output('dataurl');
    }

    </script>

<button onclick="javascript:demoFromHTML();">PDF</button>

I took some code from samples and examples. Any ideas where I am going wrong? Thank You.

Upvotes: 1

Views: 11471

Answers (1)

Avinesh Kumar
Avinesh Kumar

Reputation: 1509

Your #testcase is not defined

try:

<script type="text/javascript">

     function demoFromHTML() {
         var doc = new jsPDF('p', 'in', 'letter');
         //var source = document.getElementById('huh');
         var specialElementHandlers = {
             '#bypassme': function(element, renderer) {
                 return true;
             }
         };

         doc.fromHTML(
            $('#huh').get(0), // [Refer Exact code tutorial][2]HTML string or DOM elem ref.
             0.5,    // x coord
             0.5,    // y coord
             {
                 'width': 7.5, // max width of content on PDF
                 'elementHandlers': specialElementHandlers
             });

         doc.output('dataurl');
    }

    </script>

Here is the working example http://jsfiddle.net/xzZ7n/898/

Upvotes: 2

Related Questions