How to export HTML table content to excel file

Solved3.00K viewsangular-js html

How to export HTML table content to excel file

I want to display the table data from the HTML page in an excel sheet with the click of a button. I have tried various onclick functions and Directives but it’s not working.

Share:
vito Selected answer as best September 21, 2021
0

To convert HTML data into excel table you have to insert some script in index.html

<script data-require="[email protected]*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.min.js"></script>

and create a function onclick that will convert data into excel table
as stated below

<body ng-app="ExcelDirectiveExample">
    <div ng-controller="TableCtrl as tc">
      <download-as-excel xlname="sample.xls" sheetname="sample" template="table1.html" object="tc"></download-as-excel>
/*table.html contain the table which we need to convert to excel sheet*/
      <ng-include src="'table.html'"></ng-include>
      <button ng-click='tc.changeRow2()'>Modify object</button>
    </div>
</body>
<script>
angular.module('ExcelDirectiveExample', [])
.directive('downloadAsExcel', function($compile, $sce, $templateRequest) {
  return {
    restrict: 'E',
    scope: {
      template: '@',
      object: '='
    },
    replace: true,
    template: '<a class="xls">Download as Excel</a>',
    link: function(scope, element, attrs) {
      var contentType = 'data:application/vnd.ms-excel;base64';
      var htmlS = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" ><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{sheetname}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body>{table}</body></html>';
      var format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) };
             var blobbed = function(data) {
        var blob = new Blob([format(htmlS, data)], { type: contentType });
        var blobURL = window.URL.createObjectURL(blob);
        if (blobURL) {
          element.attr('href', blobURL);
          element.attr('download', data['name']);
        }
      };
             scope.$watch('object', function(nv, ov) {
        var tUrl = $sce.getTrustedResourceUrl(scope.template);
        $templateRequest(tUrl)
        .then(function(tmpl) {
          var t = $('<div/>').append($compile(tmpl)(scope));
          setTimeout(function() {
            scope.$apply();
            blobbed({ 
              sheetname: attrs.sheetname, 
              name: attrs.xlname, 
              table: t.html()
            });
          }, 100);
        });
      }, true);
    }
  };
})
.controller('TableCtrl', function() {
  this.rows = ['Row 1', 'Row 2', 'Row 3'];
  this.cols = ['Col 1', 'Col 2', 'Col 3'];
     var self = this;
  this.changeRow2 = function() {
    self.rows[1] = 'Modified Row 2';
  }
});
</script>

Share:
vito Selected answer as best September 21, 2021
0