Uncaught TypeError: Cannot read property 'cells' of undefined jspdf

Question

I am having a velocity template file which I am trying to convert into pdf. After googling a bit I found a framework called JSPDf. When I am trying to use it it gives me error Uncaught TypeError: Cannot read property 'cells' of undefined jspdf.

function html_to_pdf() {
        var pdf = new jsPDF('p', 'pt', 'letter');
        // source can be HTML-formatted string, or a reference
        // to an actual DOM element from which the text will be scraped.

        AJS.log(pdf)
        source = $('#productcanvas')[0];


        AJS.log(source)
        // we support special element handlers. Register them with jQuery-style
        // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
        // There is no support for any other type of selectors
        // (class, of compound) at this time.
        specialElementHandlers = {
            // element with id of "bypass" - jQuery style selector
            '#bypassme': function (element, renderer) {
                // true = "handled elsewhere, bypass text extraction"
                return true
            }
        };
        AJS.log("Special Elements Handler")
        AJS.log(specialElementHandlers)
        margins = {
            top: 80,
            bottom: 60,
            left: 40,
            width: 522
        };

        AJS.log("Margins")
        AJS.log(margins)
        // all coords and widths are in jsPDF instance's declared units
        // 'inches' in this case
        pdf.fromHTML(
                source, // HTML string or DOM elem ref.
                margins.left, // x coord
                margins.top, { // y coord
                    'width': margins.width, // max width of content on PDF
                    'elementHandlers': specialElementHandlers
                },

                function (dispose) {
                    // dispose: object with X, Y of the last line add to the PDF
                    //          this allow the insertion of new lines after html
                    pdf.save('Test.pdf');
                }, margins);
    }

velocity code:

<div class="tabs-pane" id="productcanvas" role="tabpanel" aria-hidden="true" style="width: 100%">


        <h2>Product Canvas</h2>

        <hr>



        <div class="aui-page-panel-nav" id="targetgroup" style="display:inline-block; width:calc(99% / 3);">
            <h2 style="text-align:center;">Target Group</h2>
            <hr>




            <table class="aui" id="targetgroup_table" style="margin-top: 10px; border-collapse:separate;">
                <tbody id="targetgroup_table">
                    #set ($size = $targetGroupConfs.size())
                    #foreach($i in [0..$size])
                        #if($i < $size)

                        <tr class="product-discovery-big-picture" data-key="$targetGroupConfs.get($i).actor" >

                            <td><span class="name" style="text-align: center">$targetGroupConfs.get($i).actor</span>
                                <span class="remove aui-icon aui-icon-small aui-iconfont-remove actions" style="float: right"
                                      title="Remove project" data-key="$targetGroupConfs.get($i).actor"
                                      onclick="transit_time_remove_proj('$targetGroupConfs.get($i).actor')">
          </span>
                            </td>


                        </tr>

                        #end
                    #end


                </tbody>
            </table>



        </div>


        <div class="aui-page-panel-nav" id="bigpicture" style="display:inline-block; width:calc(99% / 3);">
            <h2 style="text-align:center">Big Picture</h2>
            <hr>


            <table class="aui" id="bigpicture_table" style="margin-top: 10px;border-collapse:separate;">
                <tbody id="targetgroup_table">
                    #set ($size = $bigPictureConfs.size())
                    #foreach($i in [0..$size])
                        #if($i < $size)
                        <tr class="product-discovery-big-picture" data-key="$bigPictureConfs.get($i).impact" >
                            <td><span class="name">$bigPictureConfs.get($i).impact</span>
                                <span class="remove aui-icon aui-icon-small aui-iconfont-remove actions" style="float: right"
                                      title="Remove project" data-key="$bigPictureConfs.get($i).impact"
                                      onclick="transit_time_remove_proj('$bigPictureConfs.get($i).impact')">

          </span>
                            </td>

                        </tr>
                        #end
                    #end


                </tbody>
            </table>




        </div>


        <div class="aui-page-panel-nav" id="productdetails" style="display:inline-block; width:calc(99% / 3);">


            <h2 style="text-align:center">Product Details</h2>

            <hr>

            <hr>



            <table class="aui" id="bigpicture_table" style="margin-top: 10px;border-collapse:separate;">
                <tbody id="targetgroup_table">
                    #set ($size = $productDetailsConfs.size())
                    #foreach($i in [0..$size])
                        #if($i < $size)

                        <tr class="product-discovery-big-picture" data-key="$productDetailsConfs.get($i).issueId" >




                            <td>#*<span>$!{productDetailsConfs.get($i).getIssueID().replace('"',"")}</span>*#
                                <span><a class=colored-link-1  href="http://lp-alok:2990/jira/browse/$productDetailsConfs.get($i).getIssueID()" target=_blank>$productDetailsConfs.get($i).getIssueID()</a></span>
                               #* <span class="remove aui-icon aui-icon-small aui-iconfont-remove actions"
                                      title="Remove project" data-key="$productDetailsConfs.get($i).issueId"
                                      onclick="transit_time_remove_proj('$productDetailsConfs.get($i).issueId')">
          </span>*#
                            </td>

                        </tr>
                        #end
                    #end


                </tbody>
            </table>



        </div>


    </div>
</div>

Answer 1

This is a very serious issue and still not has been solved.

This is because jsPDF don't recognize table cell to convert in pdf, to overcome I replace table HTML to list.