FileSaver.js saveAs (Xlsx)

Question

Ich verwende filesaver.js, um mein div (mit mehreren Tabellen) zu Excel zu exportieren. Ich kann es als XLS mit dem folgenden Code exportieren.

var blob = new Blob([document.getElementById('exportable').innerHTML], { 
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
}); 
saveAs(blob, "Test Report using FileSaver.xls"); 

Allerdings möchte ich meine div zu XLSX exportieren. Kann jemand helfen? Ich habe versucht, den MIME-Typ zu XLSX zu ändern, aber hat nicht geholfen.

Answer 1

Aktualisieren W3C nicht implementiert .xlsx so die Browser zu. Aber Sie können alsql eine js Bibliothek verwenden hier die Exportdaten als gültige .xlsx die jsfiddle oder laufen unter Code

function myCtrl($scope) { 
 
    $scope.exportData = function() { 
 
     alasql('SELECT * INTO XLSX("Report.xlsx",{headers:true}) FROM ?',[$scope.items]); 
 
    }; 
 
    
 
    $scope.items = [{ 
 
     name: "John Smith", 
 
     email: "j.smith@example.com", 
 
     dob: "1985-10-10" 
 
    }, { 
 
     name: "Jane Smith", 
 
     email: "jane.smith@example.com", 
 
     dob: "1988-12-22" 
 
    }, { 
 
     name: "Jan Smith", 
 
     email: "jan.smith@example.com", 
 
     dob: "2010-01-02" 
 
    }, { 
 
     name: "Jake Smith", 
 
     email: "jake.smith@exmaple.com", 
 
     dob: "2009-03-21" 
 
    }, { 
 
     name: "Josh Smith", 
 
     email: "josh@example.com", 
 
     dob: "2011-12-12" 
 
    }, { 
 
     name: "Jessie Smith", 
 
     email: "jess@example.com", 
 
     dob: "2004-10-12" 
 
    }]; 
 
};

<script src="https://cdn.jsdelivr.net/alasql/0.3.6/alasql.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.2/xlsx.core.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app> 
 
<div ng-controller="myCtrl"> 
 
    <button ng-click="exportData()">Export</button> 
 
    <br /> 
 
    <div id="exportable"> 
 
    <table width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Name</th> 
 
       <th>Email</th> 
 
       <th>DoB</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="item in items"> 
 
       <td>{{item.name}}</td> 
 
       <td>{{item.email}}</td> 
 
       <td>{{item.dob | date:'MM/dd/yy'}}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
    </div> 
 
</div> 
 
</div>