Question

单击

的导出按钮时会发生这种情况

  $scope.export = function() {
        html2canvas(document.getElementById('balanceSheet')).then(function(canvas) {
            document.body.appendChild(canvas);
            var data = canvas.toDataURL();
            var docDefinition = {
                content: [{
                    image: data,
                    width: 500,
                }]
            };
            pdfMake.createPdf(docDefinition).download("test.pdf");
        });
    }

我导入的脚本是：

此处有完整的错误消息：

angular.js:14328 TypeError: Cannot read property 'ownerDocument' of null
    at html2canvas (html2canvas.js:3364)
    at b.$scope.export (ReportsController.js:29)
    at fn (eval at compile (angular.js:15156), <anonymous>:4:144)
    at e (angular.js:26744)
    at b.$eval (angular.js:17972)
    at b.$apply (angular.js:18072)
    at HTMLAnchorElement.<anonymous> (angular.js:26749)
    at HTMLAnchorElement.dispatch (jquery-1.11.2.min.js:3)
    at HTMLAnchorElement.r.handle (jquery-1.11.2.min.js:3)

任何想法为什么它不起作用？任何帮助将不胜感激！

编辑：

<div class="col s12" ng-if="balanceSheet" id="balanceSheet">
                    <div class="row left-align"><i ng-click="returnToMain()"  class="mdi-hardware-keyboard-backspace medium"></i></div>
                    <div class="row center-align">
                        <p><h3>{{businessData.companyName}}</h3></p>
                        <p><h5>Balance Sheet</h5></p>
                        <p><h5>As of date here</h5></p>
                        <div class="divider"></div>
                    </div>
                    <div class="row center-align">
                        <div class="col s6 m6 l6">
                            <div class="row"><h5>Assets</h5></div>
                            <div class="row">
                                <div class="col s12">
                                    <div class="col s6">
                                        <p>Cash</p>
                                    </div>
                                    <div class="col s6">
                                        <p>Php 120</p>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

edited2：

html2canvas.js:373 Invalid value given for Length: "auto"

:8080/#!/Reports:1 Uncaught (in promise) invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

Answer 1

这是因为ng-if尝试将ng-if="balanceSheet"替换为ng-show ="balanceSheet"的功能应该有效。

Answer 2

修正了它。

Saurabh Agrawal的回答是错误

Uncaught (in promise) invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

它应该是ng-show而不是ng-if

和

的错误

{{1}}

答案是你需要先查看html。我必须将$ scope.balanceSheet设为true然后创建一个图像

因此，您需要在捕获之前先查看html

AngularJS到pdfMakeTypeError：无法在html2canvas

2 个答案: