title: Is this the Right way to Export to an Excel using angularjs
body: <p>This AngularJS code works, but the problem is it shows the excel warning "This file format and extension of download.xls doesnt match", Is there a better way.</p>
  
  <p><a href="https://i.stack.imgur.com/47ILD.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/47ILD.jpg" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Code goes here
  var myApp=angular.module("myApp",[]);
  myApp.factory('Excel',function($window){
          var uri='data:application/vnd.ms-excel;base64,',
              template='&lt;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"&gt;&lt;head&gt;&lt;!--[if gte mso 9]&gt;&lt;xml&gt;&lt;x:ExcelWorkbook&gt;&lt;x:ExcelWorksheets&gt;&lt;x:ExcelWorksheet&gt;&lt;x:Name&gt;{worksheet}&lt;/x:Name&gt;&lt;x:WorksheetOptions&gt;&lt;x:DisplayGridlines/&gt;&lt;/x:WorksheetOptions&gt;&lt;/x:ExcelWorksheet&gt;&lt;/x:ExcelWorksheets&gt;&lt;/x:ExcelWorkbook&gt;&lt;/xml&gt;&lt;![endif]--&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt;{table}&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;',
              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){
        $scope.exportToExcel=function(tableId){ // ex: '#my-table'
              var exportHref=Excel.tableToExcel(tableId,'WireWorkbenchDataExport');
              $timeout(function(){location.href=exportHref;},100); // trigger download
          }
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Styles go here */
  .table-header 
  {
  background-color: lightskyblue;  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="myApp"&gt;
  
    &lt;head&gt;
      
      &lt;script data-require="angular.js@*" data-semver="2.0.0" src="https://code.angularjs.org/1.4.8/angular.js
  "&gt;&lt;/script&gt;
      &lt;script data-require="jquery@*" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body ng-controller="MyCtrl"&gt;
      &lt;h1&gt;Export to Excel&lt;/h1&gt;
      &lt;button class="btn btn-link" ng-click="exportToExcel('#tableToExport')"&gt;
        &lt;span class="glyphicon glyphicon-share"&gt;&lt;/span&gt;
   Export to Excel
      &lt;/button&gt;
      &lt;div id="tableToExport"&gt;
        &lt;table border="1"&gt;
          &lt;thead&gt;
            &lt;tr class="table-header"&gt;
              &lt;th&gt;Team&lt;/th&gt;
              &lt;th&gt;Process Type&lt;/th&gt;
              &lt;th&gt;Cedent&lt;/th&gt;
            &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td&gt;value 1&lt;/td&gt;
              &lt;td&gt;value 2&lt;/td&gt;
              &lt;td&gt;value 3&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;value 4&lt;/td&gt;
              &lt;td&gt;value 5&lt;/td&gt;
              &lt;td&gt;value 6&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;10.12.2015&lt;/td&gt;
              &lt;td&gt;AXA Affin&lt;/td&gt;
              &lt;td&gt;101024 - Quota Share QS&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>