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.

?

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

?

<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

var app = angular.module('ngGridApp', ['ngGrid']);

app.controller('ngGridController', function ($scope) {

    $scope.ACPreferences = [{

        Nominees: "Anil Singh",

        Email: '[email protected]',

        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%'

    },

    {

        Nominees: "Dilip Singh",

        Email: '[email protected]',

        Threshold: '50%,100%,120%'

    },

    {

        Nominees: "Reena Singh",

        Email: '[email protected]',

        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: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%'
    },
    {
        Nominees: "Dilip Singh",
        Email: '[email protected]',
        Threshold: '50%,100%,120%'
    },
    {
        Nominees: "Reena Singh",
        Email: '[email protected]',
        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'
    };
});

Pin it

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://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

                          You Might Also Like                
                         