wake-up-neo.com

Exportiere in xls mit anglejs

Ich arbeite an der Winkel-js-App und bin in einer Situation geblieben, in der ich Daten mit Winkel-js nach Xls exportieren muss. Ich habe im Internet viel nach Exportfunktionalität oder nach einer Bibliothek für eckige Js gesucht, damit ich das tun kann oder zumindest die Idee habe, wie man exportiert. Ich habe keinen Code oder Arbeit, die ich hier zeigen kann. 

Ich brauche Vorschläge. Bitte hilf mir dabei. 

Danke im Voraus.

Aktualisieren:

Ich habe Daten, die ein Array von Objekten sind, und ich iteriere das auf der Benutzeroberfläche in einer Tabelle. Mein Backend ist node.js und das Frontend sind eckige Js.

Mein Problem ist, wenn wir die Daten vom Server haben und ich auf der Benutzeroberfläche benutze. Wie kann ich die gleichen Daten verwenden, um mit winkeln js in Xls zu exportieren. Ich möchte nicht noch einmal im Backend anrufen, um die Daten zu extrahieren und zu exportieren. 

In der vorhandenen Tabelle kann der Benutzer das Kontrollkästchen (beliebige Anzahl von Zeilen oder alle Zeilen) auswählen, um die Daten in Xls zu extrahieren.

In node.js habe ich ein Knotenmodul mit dem Namen: Excel verwendet, das auf der Nodemodules-Site verfügbar ist.

Meine Daten sind so:

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

Ich möchte die Lösung mithilfe von anglejs oder einer beliebigen anglejs-Bibliothek.

55
w3uiguru

Ein billiger Weg, dies zu tun, ist die Verwendung von Angular, um einen <table> zu generieren, und mit FileSaver.js die Tabelle als .xls-Datei ausgeben, die der Benutzer herunterladen kann. Excel kann die HTML-Tabelle als Tabellenkalkulation öffnen.

<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>

Aufruf exportieren:

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 mit Checkbox-Funktionalität und Fragendaten aktualisiert . Demo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/

63
TheSharpieOne

Sie können die Alasql JavaScript-Bibliothek ausprobieren, die mit der XLSX.js-Bibliothek zusammenarbeitet, um den Export von Angular.js-Daten zu erleichtern. Dies ist ein Beispiel für einen Controller mit der Funktion 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"
  }];
}

In diesem Beispiel in jsFiddle finden Sie den vollständigen HTML- und JavaScript-Code.

AKTUALISIERT Ein anderes Beispiel mit farbigen Zellen .

Außerdem müssen Sie zwei Bibliotheken hinzufügen:

23
agershun

Wenn ich etwas brauchte, haben ng-csv und andere Lösungen hier nicht ganz geholfen. Meine Daten waren in $ scope und es gab keine Tabellen, die dies zeigten. Also habe ich eine Direktive erstellt, um die angegebenen Daten mithilfe von Sheet.js (xslsx.js) und FileSaver.js nach Excel zu exportieren.

Hier ist meine Lösung verpackt.

Zum Beispiel sind die Daten:

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

Ich musste Daten als Array von Arrays für meine Direktive in meinem Controller vorbereiten:

$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]);
});

Fügen Sie schließlich der Vorlage eine Direktive hinzu. Es zeigt eine Schaltfläche. (Siehe die Geige ).

<div Excel-export export-data="exportData" file-name="{{fileName}}"></div>
15
Kursad Gulseven

Wenn Sie Ihre Daten in ng-grid laden, können Sie das CSV-Export-Plugin verwenden. Das Plugin erstellt eine Schaltfläche mit den Rasterdaten als csv in einem href-Tag. 

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

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

Aktualisieren von Links, wenn die Bibliothek umbenannt wurde:

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

Bibliotheksseite: http://ui-grid.info/

Dokumentation zum csv-Export: http://ui-grid.info/docs/#/tutorial/206_exporting_data

11
debovis

Ein Ausgangspunkt könnte sein, diese Direktive (ng-csv) zu verwenden, einfach die Datei als csv herunterzuladen, und das kann Excel verstehen

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

Vielleicht können Sie diesen Code anpassen (aktualisierter Link):

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

Obwohl es sich um XMLSS handelt (es warnt Sie vor dem Öffnen der Datei. Wenn Sie die Datei öffnen, wird sie korrekt geöffnet.)

var tableToExcel = (function() {

  var uri = 'data:application/vnd.ms-Excel;base64,'
, template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, 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))
  }
})()
9
Braulio

Versuchen Sie unten mit dem benutzerdefinierten Dateinamen: 

$scope.exportData= function(){                  
    var uri = 'data:application/vnd.ms-Excel;base64,'
          , template = '<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"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
          , 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();        
};
2

Wir benötigen eine JSON-Datei, die wir in den Controller von anglejs exportieren müssen, und wir sollten in der Lage sein, die HTML-Datei aufzurufen. Wir werden beide betrachten. Bevor wir jedoch beginnen, müssen wir zunächst zwei Dateien in unsere eckige Bibliothek aufnehmen. Diese beiden Dateien sind json-export-Excel.js und filesaver.js. Darüber hinaus müssen wir die Abhängigkeit in das Winkelmodul aufnehmen. Die ersten beiden Schritte lassen sich also wie folgt zusammenfassen:

1) Fügen Sie json-export.js und filesaver.js in Ihre eckige Bibliothek ein.

2) Beziehen Sie die Abhängigkeit von ngJsonExportExcel in Ihr Winkelmodul ein. 

      var myapp = angular.module('myapp', ['ngJsonExportExcel'])

Nun, da wir die erforderlichen Dateien hinzugefügt haben, können wir uns mit den Änderungen befassen, die in der HTML-Datei und im Controller vorgenommen werden müssen. Wir gehen davon aus, dass auf dem Controller ein Json erstellt wird, entweder manuell oder durch Aufruf des Backends.

HTML:

Current Page as Excel
All Pages as Excel 

In meiner Bewerbung brachte ich Ergebnisse aus dem Backend mit. Daher hatte ich zwei Möglichkeiten, nach Excel zu exportieren. Eine für die aktuelle Seite und eine für alle Daten. Sobald der Benutzer eine Option auswählt, geht ein Anruf an die Steuerung, die eine Json (Liste) vorbereitet. Jedes Objekt in der Liste bildet eine Zeile in Excel. 

Weitere Informationen finden Sie unter - https://www.oodlestechnologies.com/blogs/Export-to-Excel-using-AngularJS

0
Lovekush
$scope.ExportExcel= function () { //function define in html tag                          

                        //export to Excel file
                        var tab_text = '<table border="1px" style="font-size:20px" ">';
                        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 + '<tr bgcolor="#DFDFDF">' + tab.rows[0].innerHTML + '</tr>';
                        }

                        // table data lines, loop starting from 1
                        for (j = 1 ; j < lines; j++) {
                            tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";                                
                        }

                        tab_text = tab_text + "</table>";
                        tab_text = tab_text.replace(/<A[^>]*>|<\/A>/g, "");          //remove if u want links in your table
                        tab_text = tab_text.replace(/<img[^>]*>/gi, "");             // remove if u want images in your table
                        tab_text = tab_text.replace(/<input[^>]*>|<\/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 

0
Mr.Ngo

Ich hatte dieses Problem und habe ein Tool zum Exportieren einer HTML-Tabelle in eine CSV-Datei erstellt. Das Problem, das ich mit FileSaver.js hatte, ist, dass dieses Tool die Tabelle im HTML-Format packt. Aus diesem Grund können manche Leute die Datei nicht in Excel oder Google öffnen Rufen Sie die Funktion ... auf. Dies ist die Github-URL https://github.com/snake404/tableToCSV , wenn jemand dasselbe Problem hat.

0
snake_404