Web Snippets: Angular export to Excel

Sunday, October 4, 2015

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 


Edit in plunker

Web Snippets

Labels

Sunday, October 4, 2015

Angular export to Excel

16 comments:

Labels

Blog Archive