【angularjs】pc端使用angular搭建项目，实现导出excel功能

此为简单demo。

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>导出excel</title>
        <script src="../js/angular.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app = angular.module('myApp',[]);
            app.controller('MyCtrl',function($timeout,$scope){
                // 表格数据
                $scope.items = [
                    {
                        "Name": "ANC101",
                        "Date": "10/02/2014",
                        "Terms": ["samsung", "nokia", "apple"]
                    }, 
                    {
                        "Name": "ABC102",
                        "Date": "10/02/2014",
                        "Terms": ["motrolla", "nokia", "iPhone"]
                    }
                ];
                // 导出excel
                  $scope.exportData = function () {
                      var bFlag = 0;
                      angular.forEach($scope.items,function(value,index){
                          console.log(index);
                          if(value.selected){
                              bFlag = 1;
                          }
                      });
                      if(bFlag){
                          var blob = new Blob([document.getElementById('exportable').innerHTML], {
                            type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                        });
                        saveAs(blob, "Report.xls");
                      }
                    
                };

            
                
            });
        
            
        </script>
    </head>
    <body>
        <div ng-controller="MyCtrl">
            <button ng-click="exportData()" >Export</button>
            <br />
            <table width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Date</th>
                        <th>Terms</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in items">
                        <td><input type="checkbox" ng-model="item.selected" /></td>
                        <td>{{item.Name}}</td>
                        <td>{{item.Date}}</td>
                        <td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
                    </tr>
                </tbody>
            </table>
            <div id="exportable" style="display:none">
                <table width="100%" >
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Date</th>
                            <th>Terms</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="item in items|filter:{selected: true}">
                            <td align="center">{{item.Name}}</td>
                            <td align="center">{{item.Date}}</td>
                            <td align="center"><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </body>
</html>
View Code

 

 

 

 

 

 

 

 

 

 

作者：smile.轉角

QQ：493177502

posted on 2018-03-06 11:07  smile轉角  阅读(469)  评论(0)  编辑  收藏  举报

导航