Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Angularjs Export Json to Excel
#1
Hello, guys.

Today I am going the script which helps you to export Excel sheet from Jason in AngularJS. All you want to do, Just follow the steps given below. Thanks

AngularJS Html Code, We are going to export the Table content to Excel Sheet. Create an HTML Page and copy paste the code.

Code:
<html ng-app="myApp">

 <head>
   
   <script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/1.4.8/angular.js
"></script>
   <script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
 </head>

 <body ng-controller="MyCtrl">
   <h1>Export to Excel</h1>
   <button class="btn btn-link" ng-click="exportToExcel('#tableToExport')">
     <span class="glyphicon glyphicon-share"></span>
Export to Excel
   </button>
   <div id="tableToExport">
     <table border="1">
       <thead>
         <tr class="table-header">
           <th>Team</th>
           <th>Process Type</th>
           <th>Cedent</th>
         </tr>
       </thead>
       <tbody>
         <tr>
           <td>value 1</td>
           <td>value 2</td>
           <td>value 3</td>
         </tr>
         <tr>
           <td>value 4</td>
           <td>value 5</td>
           <td>value 6</td>
         </tr>
         <tr>
           <td>10.12.2015</td>
           <td>AXA Affin</td>
           <td>101024 - Quota Share QS</td>
         </tr>
       </tbody>
     </table>
   </div>
 </body>

</html>

CSS Style code to style the table.

Code:
/* Styles go here */
.table-header
{
background-color: lightskyblue;  
}

AngularJS code to export the Table content to Excel Sheet.

Code:
// Code goes here
var myApp=angular.module("myApp",[]);
myApp.factory('Excel',function($window){
       var uri='data:application/vnd.ms-excel;base64,',
           template='<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
           base64=function(s){return $window.btoa(unescape(encodeURIComponent(s)));},
           format=function(s,c){return s.replace(/{(\w+)}/g,function(m,p){return c[p];})};
       return {
           tableToExcel:function(tableId,worksheetName){
               var table=$(tableId),
                   ctx={worksheet:worksheetName,table:table.html()},
                   href=uri+base64(format(template,ctx));
               return href;
           }
       };
   })
   .controller('MyCtrl',function(Excel,$timeout,$scope){
     $scope.exportToExcel=function(tableId){ // ex: '#my-table'
           var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport');
           $timeout(function(){location.href=exportHref;},100); // trigger download
       }
   });

Create a copy of yours and enjoy.

Share your feedback. Thanks
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)