Export HTML table to Excel in AngularJS

Posted By : Vikash Patwal | 31-Oct-2017

This blog is help to export data and download pdf in angular js

In this blog, we will see how to export an HTML table to an Excel file, using the simple table2excel angular method. First we, will create the HTML table, which shows any employee details and an "Export to Excel" button, as shown below.For creating an excel file you could use something like exceljs. To use it in your project also install the typings you can find here. I am not sure if this library fits... haven't used it before. If you created a good Excel export table and now want to use angular and with help of HTML, the simple way is to export it to used export id value in HTML file. In this blogs, we are going to export data to excel or CSV file to several ways of converting Excel data to HTML.Using this angular file server method we export data into csv xls or excel file and also we used html table data into seperate html table.
 

Used these tag and content in html:-

export

Used in angular controller:-

$scope.exportData = function () {
          var blob = new Blob([document.getElementById('exportable').innerHTML], {
            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
          });
          FileSaver.saveAs(blob, "Leads "+new Date()+".xls");
        };

 

Angular download odf:-

$scope.printPdf = function(userId){
     $http.get('/api/v1/user/data/pdf?userId='+userId+'&reportType=application/pdf', {responseType: 'arraybuffer'}).success(function (data) {
        var file = new Blob([data], {type: 'application/pdf'});
        // var fileName = "user_"+$scope.userId+".pdf";
         var fileURL = URL.createObjectURL(file);
         $window.setTimeout(function() {}, 1000);
         $window.open(fileURL);
        //FileSaver.saveAs(file, fileName);
      });
   }

About Author

Author Image
Vikash Patwal

Vikash Patwal is Masters in Computer Applications and good in Java , he is hardworking team player.

Request for Proposal

Name is required

Comment is required

Sending message..