javascript - 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.

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.

Share Improve this question asked Oct 24, 2014 at 12:45 Akshay Arora 1,9451 gold badge16 silver badges31 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/

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Element is undefined error in jsPDF - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)