Whenever I try to export by clicking the export button, this code is triggered:
$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 necessary scripts are:
- pdfmake.min.js
- html2canvas.js
Error message in full detail:
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)
I'm puzzled as to why it's not functioning properly. Any insights or assistance would be greatly appreciated!
Update:
<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>
Additional edit:
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)