Angular JS - Come esportare l'oggetto Javascript nel file XLS?

Question

In realtà, ho un oggetto in mio controller, voglio solo esportare quell'oggetto come .xls o .csv file.i usato un sacco di approcci come questo:

HTML

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript" /> 
<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> 

Javascript

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

    $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" 
    }] 
} 

ma questo non funziona con tables.is impaginati Esiste un modo per esportare direttamente gli oggetti (in questo esempio $ scope.item) su file (xls , CSV)?

Answer 1

Sì, è possibile salvare i dati con Alasql libreria JavaScript con biblioteca XLSX.js. Ecco un esempio:

Primo: comprende due librerie JavaScript nella pagina:

• alasql.min.js
• xlsx.core.min.js

Secondo: sostituire ExportData() funzione nel codice con:

$scope.exportData = function() { 
     alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]); 
    }; 

Terzo: per i file CSV - è sufficiente utilizzare la funzione CSV():

alasql('SELECT * INTO CSV("john.csv",{headers:true, separator:";"}) FROM ?',[$scope.items]); 

È possibile giocare con this example in jsFiddle.

Answer 2

Se sei soddisfatto di un file CSV, il modulo ngCsv è la soluzione giusta. Non carichi elementi dal DOM ma esporti direttamente un array. Qui puoi vedere un esempio di ngCsv in azione.

il codice HTML:

<h2>Export {{sample}}</h2> 
    <div> 
     <button type="button" ng-csv="getArray" filename="test.csv">Export</button> 
</div> 

ei js:

angular.module('csv', ['ngCsv']); 

function Main($scope) { 
    $scope.sample = "Sample"; 
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];        
}