Angular 1 and Angular 2 Integration

Export ng-grid data to Excel, CSV and PDF format in angularjs

In the 1st Step, we write a plug-In class for exporting ng-grid data to CSV, excel and PDF formats. In this plug-In, we add the export CSV link in footer tab. 

Stayed Informed Angular2 ng-if else

Stayed Informed Angular2  ng-show

The name of plug-In class is "pluginNgGridCVSExport" which are give below.


?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
function pluginNgGridCVSExport(options) {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.grid = grid;
        self.scope = scope;
        function showCVSExportDownloadLink() {
            var keyCollections = [];
            for (var grd in grid.config.columnDefs) {
                keyCollections.push(grid.config.columnDefs[grd].field);
            }
            var csvFileDatas = '';
            function StringifyCSVData(strKey) {
                if (strKey == null) { // we want to catch anything null-ish, hence just == not ===
                    return '';
                }
                if (typeof (strKey) === 'number') {
                    return '' + strKey;
                }
                if (typeof (strKey) === 'boolean') {
                    return (strKey ? 'TRUE' : 'FALSE');
                }
                if (typeof (strKey) === 'string') {
                    return strKey.replace(/"/g, '""');
                }
                return JSON.stringify(strKey).replace(/"/g, '""');
            }
            function swapLastCommaForNewline(strKey) {
                var newStr = strKey.substr(0, strKey.length - 1);
                return newStr + "\n";
            }
            for (var k in keyCollections) {
                csvFileDatas += '"' + StringifyCSVData(keyCollections[k]) + '",';
            }
            csvFileDatas = swapLastCommaForNewline(csvFileDatas);
            var getGridData = grid.data;
            for (var gridRow in getGridData) {
                for (k in keyCollections) {
                    var currentReowCell;
                    if (options != null && options.columnOverrides != null && options.columnOverrides[keyCollections[k]] != null) {
                        currentReowCell = options.columnOverrides[keyCollections[k]](getGridData[gridRow][keyCollections[k]]);
                    }
                    else {
                        currentReowCell = getGridData[gridRow][keyCollections[k]];
                    }
                    csvFileDatas += '"' + StringifyCSVData(currentReowCell) + '",';
                }
                csvFileDatas = swapLastCommaForNewline(csvFileDatas);
            }
            var footerPanel = grid.$root.find(".ngFooterPanel");
            var csvFooterPanelLink = grid.$root.find('.ngFooterPanel .csv-data-link-span');
            if (csvFooterPanelLink != null) {
                csvFooterPanelLink.remove();
            }
            var csvHTMLTemplateLink = "<span class=\"csv-data-link-span\">";
            csvHTMLTemplateLink += "<br><a href=\"data:text/csv;charset=UTF-8,";
            csvHTMLTemplateLink += encodeURIComponent(csvFileDatas);
            csvHTMLTemplateLink += "\" download=\"Export-from-Grid.csv\">Export Data in CSV file</a></br></span>";
            footerPanel.append(csvHTMLTemplateLink);
        }
        setTimeout(showCVSExportDownloadLink, 0);
        scope.cvsRenderRowsKeys = function () {
            var hashVal = '';
            for (var index in scope.RowsIndex) {
                hashVal += scope.RowsIndex[index].$$hashKey;
            }
            return hashVal;
        };
        scope.$watch('cvsRenderRowsKeys()', showCVSExportDownloadLink);
    };
}
function pluginNgGridCVSExport(options) {
    var self = this;
    self.grid = null;
    self.scope = null;
    self.init = function (scope, grid, services) {
        self.grid = grid;
        self.scope = scope;
        function showCVSExportDownloadLink() {
            var keyCollections = [];
            for (var grd in grid.config.columnDefs) {
                keyCollections.push(grid.config.columnDefs[grd].field);
            }

            var csvFileDatas = '';
            function StringifyCSVData(strKey) {
                if (strKey == null) { // we want to catch anything null-ish, hence just == not ===
                    return '';
                }
                if (typeof (strKey) === 'number') {
                    return '' + strKey;
                }
                if (typeof (strKey) === 'boolean') {
                    return (strKey ? 'TRUE' : 'FALSE');
                }
                if (typeof (strKey) === 'string') {
                    return strKey.replace(/"/g, '""');
                }
                return JSON.stringify(strKey).replace(/"/g, '""');
            }

            function swapLastCommaForNewline(strKey) {
                var newStr = strKey.substr(0, strKey.length - 1);
                return newStr + "\n";
            }

            for (var k in keyCollections) {
                csvFileDatas += '"' + StringifyCSVData(keyCollections[k]) + '",';
            }

            csvFileDatas = swapLastCommaForNewline(csvFileDatas);

            var getGridData = grid.data;
            for (var gridRow in getGridData) {
                for (k in keyCollections) {
                    var currentReowCell;
                    if (options != null && options.columnOverrides != null && options.columnOverrides[keyCollections[k]] != null) {
                        currentReowCell = options.columnOverrides[keyCollections[k]](getGridData[gridRow][keyCollections[k]]);
                    }
                    else {
                        currentReowCell = getGridData[gridRow][keyCollections[k]];
                    }
                    csvFileDatas += '"' + StringifyCSVData(currentReowCell) + '",';
                }
                csvFileDatas = swapLastCommaForNewline(csvFileDatas);
            }

            var footerPanel = grid.$root.find(".ngFooterPanel");
            var csvFooterPanelLink = grid.$root.find('.ngFooterPanel .csv-data-link-span');
            if (csvFooterPanelLink != null) {
                csvFooterPanelLink.remove();
            }

            var csvHTMLTemplateLink = "<span class=\"csv-data-link-span\">";
            csvHTMLTemplateLink += "<br><a href=\"data:text/csv;charset=UTF-8,";
            csvHTMLTemplateLink += encodeURIComponent(csvFileDatas);
            csvHTMLTemplateLink += "\" download=\"Export-from-Grid.csv\">Export Data in CSV file</a></br></span>";
            footerPanel.append(csvHTMLTemplateLink);
        }

        setTimeout(showCVSExportDownloadLink, 0);

        scope.cvsRenderRowsKeys = function () {
            var hashVal = '';
            for (var index in scope.RowsIndex) {
                hashVal += scope.RowsIndex[index].$$hashKey;
            }
            return hashVal;
        };
        scope.$watch('cvsRenderRowsKeys()', showCVSExportDownloadLink);
    };
}
In the 2nd Step, We use the above plug-In class in ng-grid for exporting in CSV file. 

1. The HTML code-sample 
2. The AngularJs code-sample The HTML code-sample

?
1
2
3
<div ng-app="ngGridApp" ng-controller="ngGridController">
     <div class="ngGridStyle" ng-grid="ngGridView"></div>
  </div>
<div ng-app="ngGridApp" ng-controller="ngGridController"> 
     <div class="ngGridStyle" ng-grid="ngGridView"></div>
  </div>

The AngularJs code-sample

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%'
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%,100%,120%'
    },
    {
        Nominees: "Reena Singh",
        Email: 'reen.singh@gmail.com',
        Threshold: '50%, 70%, 80%,'
    }];
    $scope.myColumns = [{ field: 'Nominees', displayName: 'Nominees'},
            { field: 'Email', displayName: 'Email' },
            { field: 'Threshold', displayName: 'Threshold' }];
    $scope.ngGridView = {
        data: 'ACPreferences',
        plugins: [new pluginNgGridCVSExport()],
        showFooter: true,
        columnDefs: 'myColumns'
    };
});
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%'
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%,100%,120%'
    },
    {
        Nominees: "Reena Singh",
        Email: 'reen.singh@gmail.com',
        Threshold: '50%, 70%, 80%,'
    }];

    $scope.myColumns = [{ field: 'Nominees', displayName: 'Nominees'},
            { field: 'Email', displayName: 'Email' },
            { field: 'Threshold', displayName: 'Threshold' }];

    $scope.ngGridView = {
        data: 'ACPreferences',
        plugins: [new pluginNgGridCVSExport()],
        showFooter: true,
        columnDefs: 'myColumns'
    };
});
ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.