Export to excel in ASP.Net 5 using angularjs

Question

I am working on one web application which is developing in ASP.Net vNext 5 MVC with angularjs. I want to export javascript array data in format of .xls, csv and pdf. My data structure (List of Employees) like this,

[{
"id": 1,
"name": "Employee 1",
"joiningDate": "January 2005",
"roleList": [{
    "id": 1,
    "name": "Role 1",
    "relatedDepartment": [{
        "id": 1,
        "departmentName": "Department 1",
        "status": "Working"
    }, {
        "id": 2,
        "departmentName": "Department 2",
        "status": "Paused"
    }]
}, {
    "id": 2,
    "name": "Role 2",
    "relatedDepartment": [{
        "id": 3,
        "departmentName": "Department 3",
        "status": "Working"
    }, {
        "id": 4,
        "departmentName": "Department 4",
        "status": "Working"
    }]
}]
}, {
    "id": 2,
    "name": "Employee 2",
    "joiningDate": "May 2006",
    "roleList": [{
        "id": 3,
        "name": "Role 3",
        "relatedDepartment": [{
            "id": 1,
            "departmentName": "Department 1",
            "status": "Working"
        }, {
            "id": 3,
            "departmentName": "Department 3",
            "status": "Working"
        }]
    }, {
        "id": 4,
        "name": "Role 4",
        "relatedDepartment": [{
            "id": 3,
            "departmentName": "Department 3",
            "status": "Paused"
        }, {
            "id": 4,
            "departmentName": "Department 4",
            "status": "Working"
        }]
    }]
}]

I want to export to excel in format like, Excel format

Is it possible to export to excel in ASP.Net 5 mvc with angularjs? If not please let me know any other possible solutions.

Thanks in advance.

Answer 1

First, in Visual Studio, go to NuGet Package manager and add FileSaver.js to your project. Change your HTML to add a div with an id like below:

    <div id="myTable">
<table class="table table-bordered">
    <thead>
      <tr>
        <th rowspan="2">#</th>
        <th colspan="2">Employee Info</th>
        <th rowspan="2">Roles</th>
        <th colspan="2">Related Department</th>
      </tr>
      <tr>
        <th>Name</th>
        <th>Joining Date</th>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat-start="emp in empList" ng-show="false" ng-init="parentIndex= $index"></tr>
      <tr ng-repeat-start="role in emp.roleList" ng-if="false"></tr>
      <tr ng-repeat="dept in role.relatedDepartment" ng-init="kFirst = $first; rSpan=countRowSpan(emp.roleList)">
        <td ng-if="(kFirst && $parent.$first)" rowspan="{{rSpan}}">{{(parentIndex + 1)}}</td>
        <td ng-if="(kFirst && $parent.$first)" rowspan="{{rSpan}}">
          {{emp.name}}
        </td>
        <td ng-if="(kFirst && $parent.$first)" rowspan="{{rSpan}}">
          {{emp.joiningDate}}
        </td>
        <td ng-if="kFirst" rowspan="{{role.relatedDepartment.length}}">{{role.name}}</td>
        <td>{{dept.departmentName}}</td>
        <td>{{dept.status}}</td>
      </tr>
      <tr ng-repeat-end ng-if="false"></tr>
      <tr ng-repeat-end ng-if="false"></tr>
    </tbody>
  </table>
</div>
   <button type="button" ng-click="export()">Export</button>

Then in your Angular Controller:

 $scope.export = function(){
var blob = new Blob([document.getElementById('myTable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                });

                saveAs(blob, "MyTable.xls");
}

For csv see FileSaver.js.

For pdf see StackOverflow