元素是jsPDF中的未定义错误

时间:2014-10-24 12:45:54

标签: javascript jquery html jspdf

我正在尝试创建一个用户可以将某个表格下载为PDF的应用程序。我试图使用jsPDF用于此目的,但由于某些原因或其他原因,它无法正常工作。我在控制台中收到的最新错误是文件TypeError: element is undefined中的jspdf.plugin.from_html.js

这是我的方法:

我有以下标题:

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

这里可以注意的一件事是我的表是在页面加载过程中从我的后端提供的值动态填充的

表格如下:

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

当我调用以下脚本时,该表包含实际数据:

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

我从样本和示例中获取了一些代码。我出错的任何想法? 谢谢。

1 个答案:

答案 0 :(得分:2)

您的#testcase未定义

尝试:

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

以下是工作示例http://jsfiddle.net/xzZ7n/898/