how to export html data to pdf in angularjs and javascript
HTML :
<button onclick="pdfdownload()" class="btn btn-success"><i class="fa fa-download" ></i> Download PDf</button>
<div class="table-responsive" id="exportthis">
this is demo text
</div>
Javascript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
function pdfdownload ()
{
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("<?php echo $view_invoice[0]['lease_invioce_ino'];?>.pdf");
}
});
}
</script>
Using angular js:
File :script.js
<button onclick="pdfdownload()" class="btn btn-success"><i class="fa fa-download" ></i> Download PDf</button>
<div class="table-responsive" id="exportthis">
this is demo text
</div>
Javascript:
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
function pdfdownload ()
{
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("<?php echo $view_invoice[0]['lease_invioce_ino'];?>.pdf");
}
});
}
</script>
Using angular js:
File :script.js
var app = angular.module("app", []);
app.controller("listController", ["$scope",
function($scope) {
$scope.data= [{"agence":"CTM","secteur":"Safi","statutImp":"operationnel"}];
$scope.export = function(){
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("test.pdf");
}
});
}
}
]);
abhi
<!doctype html> <html ng-app="app"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="script.js"></script> </head> <body> <div ng-controller="listController"> <div id="exportthis"> {{data}} </div> <button ng-click="export()">export</button> </div> </body> </html>
Comments
Post a Comment