Export excel in angular js without using third party library

Question

I have list of items in scope, that is showing UI in html table using ng-repeat in table data, Below i have tried export table data to excel but that is showing only first page rows i want to show all the records in the list. i have all the data in scope using that i have to do. Is there any other wat to achieve this?

app.controller("ErrorDetailController", [
"$scope", "$location", "$routeParams", "messageService", "errorService", "repositoryService", , "sharedPageService",

function ($scope, $location, $routeParams, messageService, errorService, repositoryService,sharedPageService, **Excel, $timeout**)
     {      $scope.exportToExcel = function (tableId) { // ex: '#my-table'

        debugger;
        var exportHref = Excel.tableToExcel(tableId, 'sheet name');
        $timeout(function () { location.href = exportHref; }, 100); // trigger download
       }
     }
]); 
app.factory('Excel', function ($window) {
var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
    base64 = function (s) { return $window.btoa(unescape(encodeURIComponent(s))); },
    format = function (s, c) { return s.replace(/{(\w+)}/g, function (m, p) { return c[p]; }) };
return {
    tableToExcel: function (tableId, worksheetName) {
        var table = $(tableId),
            ctx = { worksheet: worksheetName, table: table.html() },
            href = uri + base64(format(template, ctx));
        return href;
    }
  };
 })

AR Vinoth · Accepted Answer · 2017-08-17 06:38:07Z

I have done with below code, it may be helpful to some one. Thanks....

$scope.exportExcel = function () {

    var header = ["columnName1","columnName2"];

    var column = ["data1","data2"];

     Excel.jsonToExcel($scope.list, header, column, 'sheetname', 'filename.xls');
       };
 };
eaiApp.factory('Excel', function ($window) {
var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<?xml version="1.0"?>\n' +
                    '<ss:Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet"\n' +
            'xmlns:o="urn:schemas-microsoft-com:office:office"\n' +
            'xmlns:x="urn:schemas-microsoft-com:office:excel"\n' +
            'xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet"\n' +
            'xmlns:html="http://www.w3.org/TR/REC-html40">\n' +
                    '<ss:Styles>\n' +
                    '<ss:Style ss:ID="s62">\n' +
                    '<ss:Borders>\n' +
                    '<ss:Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '</ss:Borders>\n' +
                    '</ss:Style>\n' +
                    '<ss:Style ss:ID="s63">\n' +
                    '<ss:Borders>\n' +
                    '<ss:Border ss:Position="Bottom" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Left" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Right" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '<ss:Border ss:Position="Top" ss:LineStyle="Continuous" ss:Weight="1"/>\n' +
                    '</ss:Borders>\n' +
                    '<ss:Font ss:FontName="Calibri" x:Family="Swiss" ss:Size="11" ss:Color="#000000" ss:Bold="1"/>\n' +
                    '<ss:Interior ss:Color="#F4B084" ss:Pattern="Solid"/>\n' +
                    '</ss:Style>\n' +
                    '</ss:Styles>\n' +
                   '<ss:Worksheet ss:Name="{SheetName}">\n' +
                   '<ss:Table>\n',
  };
return {

    jsonToExcel: function (scopeData, header, column,sheetName, fileName) {

        var data = typeof scopeData != "object" ? JSON.parse(scopeData) : scopeData;

        if (data.length != 0) {
            var headerRow = '<ss:Row>\n';
            for (var i = 0; i < header.length; i++) {
                delete data[0].$$hashKey;
                headerRow += '  <ss:Cell ss:StyleID="s63">\n';
                headerRow += '    <ss:Data ss:Type="String">';
                headerRow += header[i] + '</ss:Data>\n';
                headerRow += '  </ss:Cell>\n';
            }
            headerRow += '</ss:Row>\n';
            var xml = template.replace('{SheetName}', sheetName);
            xml += headerRow;

            for (var row = 0; row < data.length; row++) {
                delete data[row].$$hashKey;
                xml += '<ss:Row>\n';
                for (var col = 0; col < column.length; col++) {
                    xml += '  <ss:Cell ss:StyleID="s62">\n';
                    xml += '    <ss:Data ss:Type="String">';
                    xml += data[row][column[col]] + '</ss:Data>\n';
                    xml += '  </ss:Cell>\n';
                }
                xml += '</ss:Row>\n';
            }

            xml += '\n</ss:Table>\n' +
                   '</ss:Worksheet>\n' +
                   '</ss:Workbook>\n';

            var contentType = 'application/octet-stream';
            var uri = 'application/octet-stream,' + escape(xml);
            var link = document.createElement("a");
            var blob = new Blob([xml], {
                'type': contentType
            });
            var myNav = navigator.userAgent.toLowerCase();
            var isIE = (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
            if (navigator.appVersion.toString().indexOf('.NET') > 0) {
                window.navigator.msSaveOrOpenBlob(blob, fileName);
            }
            else {

                link.href = window.URL.createObjectURL(blob);
                link.download = fileName;
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }
        }
        else
            alert("No records to export.");

        return;
    }
};

Collectives™ on Stack Overflow

Export excel in angular js without using third party library

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related