Export HTML Data to XLS
Posted By : Amit Kumar Gupta | 29-Jun-2017
Some years ago to convert table in excel sheet we were write many boiler plate code. Now we can easily convert table in XLS sheet using angular js. In this blog we will learn how easily we can convert html data to excel report using angular js. We have to include Blob and FileSaver in our module.Blob represent the bowl of code that holds the data of a file but it is not actually represent actaul file. We can include blob in our project either by using bower or include the Javascript file in the project. FileSaver is used to save the file which is converted in XLS form in the system. We can include FileSaver in our project either by using bower or include the Javascript file in the project. We will get html table by specify the id of the division tag. All the html data inside the division tag will export on the basis of div tag Id. By this method we will get all the data inside the opening and closing tag of divison tag. On the click of the button 'Export Data' exportData() function will execute. And It goes to controller part. Below example is mention. In this example table content will export in XLS form.
To include Blob and Filesaver in your project write below command in our project-:
bower install Blob
bower install FileSaver
HTML part--
| First Name | Last Name | Email Id | Mob | Address | Sex |
|---|---|---|---|---|---|
| {{item.firstName}} | {{item.lastName}} | {{item.email}} | {{item.mob}} | {{item.address}} | {{item.sex}} |
Controller part--
$scope.exportData = function () {
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
FileSaver.saveAs(blob, "Orders "+new Date()+".xls");
};
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
Amit Kumar Gupta
Amit is a bright Web App Developer, and has good knowledge of Java,Machine Learning, Python, Algorithm. His hobbies are playing badminton and reading novel.