Generate PDF from HTML using pdfMake in Angularjs
Okay, I figured this out.
You will need html2canvas and pdfmake. You do NOT need to do any injection in your app.js to either, just include in your script tags
On the div that you want to create the PDF of, add an ID name like below:
<div id="exportthis">In your Angular controller use the id of the div in your call to html2canvas:
change the canvas to an image using toDataURL()
Then in your docDefinition for pdfmake assign the image to the content.
The completed code in your controller will look like this:
html2canvas(document.getElementById('exportthis'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500,
}]
};
pdfMake.createPdf(docDefinition).download("Score_Details.pdf");
}
});
I hope this helps someone else. Happy coding!
Using pdfmake - generate pdf tool in AngularJS
found it!
I missed to import of the pdfMake plugin in my home html file.
how to export html data to pdf in angularjs
You can use pdfmake, to export the pdf
DEMO
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"); } }); } } ]);<!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>How to create PDF document from HTML table?
I managed to create PDF reports that I needed.
Plugin I used is PDFmake and is definitely best I found, works so flawless.
Only problem I had is that I wrongly included it and that's why it didn't worked first time.
Related Topics
How to Create Separate Angularjs Controller Files
How Do Browsers Pause/Change JavaScript When Tab or Window Is Not Active
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari
A Cors Post Request Works from Plain JavaScript, But Why Not with Jquery
How to Call Loading Function with React Useeffect Only Once
Rails - Could Not Find a JavaScript Runtime
How to Loop Through All Dom Elements on a Page
How to Find First Element of Array Matching a Boolean Condition in JavaScript
Selected Text Event Trigger in JavaScript
How to Use Ajax to Do File Upload
Sort by Two Values Prioritizing on One of Them
JavaScript Convert Hsb/Hsv Color to Rgb Accurately
Set a Cookie to Httponly via JavaScript