Sunday, October 4, 2015

Angular export to Excel


Note: You can refer to my other post where it would support different flavors like Excel, Pdf
Edit in plunker new

Note: For excel it does not allow "-" character. We have to use replace function


$scope.SelectedUsers.selected.Text.replace("– ", "-- ")



<!DOCTYPE html>
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
<html ng-app="myApp">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js"type="text/javascript"></script>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-controller="myCtrl">
        <button ng-click="exportData()" ng-show="(items|filter:{selected: true}).length">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>{{item.Name}}</td>
                        <td>{{item.Date}}</td>
                        <td><span ng-repeat="term in item.Terms">{{term}}{{!$last?', ':''}}</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>
    <script type="text/javascript">
        var myAppModule = angular.module('myApp', []);
        myAppModule.controller('myCtrl', function ($scope) {
            $scope.exportData = function () {
                var blob = new Blob([document.getElementById('exportable').innerHTML], {
                    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
                });
                saveAs(blob, "Report.xls");
            };
            $scope.items = [{
                "Name": "ANC101",
                "Date": "10/02/2014",
                "Terms": ["samsung", "nokia", "apple"]
            }, {
                "Name": "ABC102",
                "Date": "10/02/2014",
                "Terms": ["motrolla", "nokia", "iPhone"]
            }]
        
    });
</script>
Other approach 
we need to filesaver.js file 

16 comments:


  1. you are really a just right webmaster. The site loading speed is incredible. It seems that you are doing any unique trick. Moreover, The contents are masterpiece. you've performed a magnificent activity on this topic! yahoo email login

    ReplyDelete
  2. Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. seo

    ReplyDelete
  3. Thanks a lot very much for the high quality and results-oriented help. I won’t think twice to endorse your blog post to anybody who wants and needs support about this area. We are providing AngularJS training in Velachery.

    For more details: AngularJs training in velachery

    ReplyDelete
  4. I just needed to record a speedy word to express profound gratitude to you for those magnificent tips and clues you are appearing on this site. We are providing AngularJs training in Velachery.
    For more details: AngularJs Training in Chennai

    ReplyDelete
  5. Literally, the best blog I have ever read. I feel bad, for not finding this blog sooner.
    mason soiza

    ReplyDelete
  6. Thanks for sharing this post.Keep sharing more like this.

    Guest posting sites
    Technology

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete



  9. The strategy you have posted on this technology helped me to get into the next level and had lot of information in it. The angular js programming language is very popular which are most widely used.



    Dot Net Training in Chennai | Dot Net Training in anna nagar | Dot Net Training in omr | Dot Net Training in porur | Dot Net Training in tambaram | Dot Net Training in velachery







    ReplyDelete