AngularJS to pdfMakeTypeError： 无法在 html2canvas 读取 null 的属性 'ownerDocument'

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");
        });
    }

我导入的脚本是：

• pdfmake.min.js
• html2canvas.js

完整的错误消息在这里：

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>

编辑2：

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的答案是错误

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

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

和

的错误

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

答案是您需要先查看HTML。我必须制作$ scope.balancesheet为tum tum，然后制作图像

因此，您需要先查看HTML，然后才能捕获