how to export html table to excel using angularjs

Question

I'm trying to export HTML table to excel using angularJS. I went through so many sites and few blogs also, but I didn't get an appropriate answer. Any help/advice greatly appreciated. This is what I was able to achieve so far:

<button class="btn" ng-click="xlms()"></button>

Angularjs:

app.controller('Myctrl', function($scope){ 
$scope.xlms = function(){
    var xl = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
    xl = xl + '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet>';
    xl = xl + '<x:Name>Test Sheet</x:Name>';

    xl = xl + '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
    xl = xl + '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';

    xl = xl + document.getElementById('export').html(); --> 'export is id of html'
    tab_text = tab_text + '</table></body></html>';
    }
    }

Further I donot know how to implement

How did you get the data on the table? If it's possible it's easier to export the raw data to csv using javascript. — morgan9999
– morgan9999, Commented Mar 16, 2018 at 14:32

Neha Tawar · Accepted Answer · 2018-03-16 18:58:06Z

1

Use the alasql cdn to export the data to xls.

 $scope.exportData = function () {
          alasql('SELECT * INTO XLS("alexa.xls",?) FROM ?',[mystyle,$scope.items]);
    }; //$scope.items array of objects //mystyle -format table type.

Please check out below plunker link for example reference for the same.

 `https://plnkr.co/edit/Hc4nq1EQMNEbJJHb6MbU?p=preview`

edited Mar 16, 2018 at 18:58

answered Mar 16, 2018 at 18:08

Neha Tawar

7058 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Debabrata · Accepted Answer · 2018-10-12 13:36:29Z

Pass the tableid using the following code:

<button class="btn" ng-click="xlms('#table1')"></button>

Then set the logic to export the html using the following code:

myApp.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;
            }
        };
    })
    .controller('MyCtrl',function(Excel,$timeout){
      $scope.xlms=function(tableId){ // ex: '#my-table'
            $scope.exportHref=Excel.tableToExcel(tableId,'sheet name');
            $timeout(function(){location.href=$scope.fileData.exportHref;},100); // trigger download
        }
    });

Collectives™ on Stack Overflow

how to export html table to excel using angularjs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related