AngularJS to pdfMakeTypeError: Cannot read property 'ownerDocument' of null at html2canvas

Question

This happens when I click the export button which is

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

The scripts I imported are:

Full error message here:

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)

any ideas why is it not working? any help will be greatly appreciated!

edit:

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

I can't exactly reproduce it but here's some snippet of my full codes http://embed.plnkr.co/Dy7u8q/ — Mark, Apr 24 '18 at 04:43

score 1 · Answer 1 · answered Apr 24 '18 at 04:22

1

This is because the functionality of ng-if try to replace ng-if="balanceSheet" to ng-show ="balanceSheet" it should work.

answered Apr 24 '18 at 04:22

Saurabh Agrawal

7,581
2
27
51

a series of errors came out. check edited post please. thank you btw – Mark Apr 24 '18 at 04:55

score 0 · Answer 2 · answered Apr 24 '18 at 06:15

Fixed it.

Saurabh Agrawal's answer is for the error

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

that it should be ng-show not ng-if

and the error for

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

the answer is you need to view the html first. I had to make the $scope.balanceSheet to true then make an image

thus, you need to view the html first before it captures

AngularJS to pdfMakeTypeError: Cannot read property 'ownerDocument' of null at html2canvas

2 Answers2