Esporta in xls usando angularjs

Sto lavorando su app angular js e mi sono bloccato in una situazione in cui devo esportare i dati in Xls usando angular js. Ho cercato molto su internet per funzionalità di esportazione o qualsiasi libreria per js angolari, quindi posso farlo o almeno posso avere l’idea di come esportare. Non ho alcun codice o lavoro da mostrare qui.

Ho bisogno di suggerimenti. Per favore aiutami su questo.

Grazie in anticipo.

Aggiornare:

Ho un dato che è una matrice di oggetti e sto iterando su UI in una tabella. Il mio back-end è node.js e frontend sono j angolari.

    Il mio problema è che se abbiamo i dati dal server e sto usando sull’interfaccia utente, come posso utilizzare gli stessi dati per esportarli in Xls usando angular js. Non voglio più effettuare una chiamata sul backend per estrarre i dati ed esportarli.

    Nella tabella esistente, l’utente può selezionare la casella di controllo (Qualsiasi numero di righe o tutte le righe) per estrarre i dati in Xls.

    In node.js ho usato il modulo nodo il cui nome è: Excel ed è disponibile sul sito dei nodemoduli.

    I miei dati sono così:

    "data": [ { "Name": "ANC101", "Date": "10/02/2014", "Terms": ["samsung", "nokia": "apple"] },{ "Name": "ABC102", "Date": "10/02/2014", "Terms": ["motrolla", "nokia": "iPhone"] } ] 

    Voglio la soluzione usando angularjs o qualsiasi libreria angularjs.

    Un modo economico per farlo è utilizzare Angular per generare un

    e utilizzare FileSaver.js per generare la tabella come file .xls che l’utente può scaricare. Excel sarà in grado di aprire la tabella HTML come foglio di calcolo.

     
    Name Email DoB
    {{item.name}} {{item.email}} {{item.dob | date:'MM/dd/yy'}}

    Esporta chiamata:

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

    Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

    Demo aggiornata con funzionalità casella di controllo e dati della domanda. Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/

    Puoi provare la libreria JavaScript Alasql che può funzionare insieme alla libreria XLSX.js per esportare facilmente i dati Angular.js. Questo è un esempio di controller con la funzione exportData ():

     function myCtrl($scope) { $scope.exportData = function () { alasql('SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?',[$scope.items]); }; $scope.items = [{ name: "John Smith", email: "[email protected]", dob: "1985-10-10" }, { name: "Jane Smith", email: "[email protected]", dob: "1988-12-22" }]; } 

    Vedi codice HTML e JavaScript completo per questo esempio in jsFiddle.

    AGGIORNATO Un altro esempio con celle coloranti .

    Inoltre è necessario includere due librerie:

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

    Quando avevo bisogno di qualcosa di simile, ng-csv e altre soluzioni qui non mi hanno aiutato completamente. I miei dati erano in $ scope e non c’erano tabelle che lo mostrassero. Così, ho creato una direttiva per esportare dati dati in Excel usando Sheet.js (xslsx.js) e FileSaver.js.

    Ecco la mia soluzione imballata.

    Ad esempio, i dati sono:

     $scope.jsonToExport = [ { "col1data": "1", "col2data": "Fight Club", "col3data": "Brad Pitt" }, { "col1data": "2", "col2data": "Matrix Series", "col3data": "Keanu Reeves" }, { "col1data": "3", "col2data": "V for Vendetta", "col3data": "Hugo Weaving" } ]; 

    Dovevo preparare i dati come array di array per la mia direttiva nel mio controller:

     $scope.exportData = []; // Headers: $scope.exportData.push(["#", "Movie", "Actor"]); // Data: angular.forEach($scope.jsonToExport, function(value, key) { $scope.exportData.push([value.col1data, value.col2data, value.col3data]); }); 

    Infine, aggiungi la direttiva al mio modello. Mostra un pulsante. (Vedi il violino ).

     

    Se carichi i tuoi dati in ng-grid, puoi usare il plugin di esportazione CSV. Il plugin crea un pulsante con i dati della griglia come csv all’interno di un tag href.

    http://angular-ui.github.io/ng-grid/

    https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js

    Aggiornare i collegamenti mentre la biblioteca è stata rinominata:

    Link Github: https://github.com/angular-ui/ui-grid

    Pagina della biblioteca: http://ui-grid.info/

    Documentazione sull’esportazione csv: http://ui-grid.info/docs/#/tutorial/206_exporting_data

    Un punto di partenza potrebbe essere usare questa direttiva (ng-csv) basta scaricare il file come csv e questo è qualcosa che Excel può capire

    http://ngmodules.org/modules/ng-csv

    Forse puoi adattare questo codice (link aggiornato):

    http://jsfiddle.net/Sourabh_/5ups6z84/2/

    Anche se sembra XMLSS (ti avvisa prima di aprire il file, se scegli di aprire il file si aprirà correttamente)

     var tableToExcel = (function() { var uri = 'data:application/vnd.ms-excel;base64,' , template = '{table}
    ' , 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 function(table, name) { if (!table.nodeType) table = document.getElementById(table) var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML} window.location.href = uri + base64(format(template, ctx)) } })()

    Prova di seguito con il nome del file personalizzato:

     $scope.exportData= function(){ var uri = 'data:application/vnd.ms-excel;base64,' , template = '{table}
    ' , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) } , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) } var table = document.getElementById("searchResult"); var filters = $('.ng-table-filters').remove(); var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}; $('.ng-table-sort-header').after(filters) ; var url = uri + base64(format(template, ctx)); var a = document.createElement('a'); a.href = url; a.download = 'Exported_Table.xls'; a.click(); };
     $scope.ExportExcel= function () { //function define in html tag //export to excel file var tab_text = ''; var textRange; var j = 0; var tab = document.getElementById('TableExcel'); // id of table var lines = tab.rows.length; // the first headline of the table if (lines > 0) { tab_text = tab_text + '' + tab.rows[0].innerHTML + ''; } // table data lines, loop starting from 1 for (j = 1 ; j < lines; j++) { tab_text = tab_text + "" + tab.rows[j].innerHTML + ""; } tab_text = tab_text + "
    "; tab_text = tab_text.replace(/]*>|<\/A>/g, ""); //remove if u want links in your table tab_text = tab_text.replace(/]*>/gi, ""); // remove if u want images in your table tab_text = tab_text.replace(/]*>|<\/input>/gi, ""); // reomves input params // console.log(tab_text); // aktivate so see the result (press F12 in browser) var fileName = 'report.xls' var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" }) if (window.navigator.msSaveBlob) { // IE 10+ window.navigator.msSaveOrOpenBlob(exceldata, fileName); //$scope.DataNullEventDetails = true; } else { var link = document.createElement('a'); //create link download file link.href = window.URL.createObjectURL(exceldata); // set url for link download link.setAttribute('download', fileName); //set attribute for link created document.body.appendChild(link); link.click(); document.body.removeChild(link); } } //html of button

    Ho avuto questo problema e ho creato uno strumento per esportare una tabella HTML in un file CSV. Il problema che ho avuto con FileSaver.js è che questo strumento afferra la tabella con il formato html, questo è il motivo per cui alcune persone non possono aprire il file in excel o google. Tutto quello che devi fare è esportare il file js e quindi chiamare la funzione. Questo è il github url https://github.com/snake404/tableToCSV se qualcuno ha lo stesso problema.