current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Dismiss
Announcing Stack Overflow Documentation

We started with Q&A. Technical documentation is next, and we need your help.

Whether you're a beginner or an experienced developer, you can contribute.

Sign up and start helping → Learn more about Documentation →
up vote 0 down vote favorite

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.

share|improve this question
    
How are you displaying this data to the user? Is the user supposed to somehow select to export the data to Excel? – Rani Radcliff Jul 15 at 16:38
    
Data will display like this shown in this image link. In my web page there is one button, on clicking of that have to export data to excel. – bdp Jul 15 at 16:48
    
If you post your HTML I can show you how to do this. – Rani Radcliff Jul 15 at 17:14
    
Sample of my page. – bdp Jul 15 at 20:15
up vote 0 down vote accepted

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

share|improve this answer
    
Let me know if you have any problems with the above solution. – Rani Radcliff Jul 15 at 21:47
    
Thanks for your reply. I tried your solution and its working for excel but I also have to export html table to csv and pdf. I tried for pdf but when I open pdf file its message me that "Failed to load". $scope.export = function() { var blob = new Blob([document.getElementById('myTable').innerHTML], { type: "application/pdf" }); saveAs(blob, "MyTablePDF.pdf"); } – bdp Jul 18 at 14:01
    
Please mark the above solution as the answer to this question so anyone else trying to export to Excel knows that it works. – Rani Radcliff Jul 18 at 15:45
    
Not getting proper output with another structure of table. jsFiddle Link. – bdp Jul 18 at 16:16
    
I'm sorry, I don't understand what you mean. What output are you getting? – Rani Radcliff Jul 18 at 16:18

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.