Question

我正在开发一个使用angularjs在ASP.Net vNext 5 MVC中开发的Web应用程序。我想以.xls，csv和pdf的格式导出javascript数组数据。我的数据结构（员工列表），像这样，

[{
"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"
        }]
    }]
}]

我想以格式导出到excel， Excel format

是否可以使用angularjs导出到ASP.Net 5 mvc中的excel？如果没有，请告诉我任何其他可能的解决方案。

提前致谢。

Answer 1

首先，在Visual Studio中，转到NuGet包管理器并将FileSaver.js添加到项目中。更改您的HTML以添加ID如下所示的div：

    <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>

然后在你的角度控制器中：

 $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");
}

对于csv，请参阅FileSaver.js。

有关pdf，请参阅StackOverflow

使用angularjs导出到ASP.Net 5中的excel

1 个答案: