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.

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.

• javascript
• jquery
• html
• jspdf

Share Improve this question Follow asked Oct 24, 2014 at 12:45 Akshay AroraAkshay Arora 1,94511 gold badge1616 silver badges3131 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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/xzZ7n/898/