/ / / / / / Export ng-grid data to Excel, CSV and PDF format in angularjs
Angular 1 and Angular 2 Integration

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

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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^