How to Export Html Data to PDF in Angularjs
Posted By : Monu Thakur | 27-Jun-2017
In this blog I will show you how can we easily export html data in pdf on the click of only one button. We need html file which we want to export in pdf form and one angular js file that is used to control the html part. The part which we want to export we will add this part in div tag. We will give the id to this div tag. On the click of button execute a function which will mention in angular js file. To export the html part in pdf we need the pdfmake plugin.
After export the pdfmake plugin in index.html file we need to inject in app.js file like this:-
angular.module('myApp', ["pdfmake"]);
This is a module of angularjs to save HTML as PDF DEMO, which basically converts HTML to HTML5 canvas and captures it and converts it to PDF and saves it to your browser.If you want to download that file then you can also download that file in a specidied directory or file as pdf form and after clicking downloaded file it will open.
Firstly you add angularjs and some js file in your project.Link given below
https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js
Create mainController.js file
var app = angular.module("app", []);
app.controller("mainController", ["$scope",
$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");
}
});
}
]);
And add mainController.js in your project.
HTML Part
| Salary Step Sequence Id | Date Modified | Amount |
|---|---|---|
| 1009 | 6/26/2017 | $500 |
Thanks
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Monu Thakur
Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.