未捕获的类型错误：无法读取未定义的 jspdf 的属性'cells'

Question

我有一个速度模板文件，我正试图转换成pdf。在谷歌上搜索了一下之后，我发现了一个名为JSPDf的框架。当我试图使用它时，它给了我错误未捕获的类型错误:无法读取未定义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);
    }

速度代码:

<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

这是一个非常严重的问题，到现在还没有解决。

这是因为jsPDF不识别表格单元格转换为pdf，为了克服我将表格HTML替换为列表。