L'exportation au format xls en utilisant angularjs

Je suis en train de travailler sur angular js application et je l'ai coincé dans une situation où je dois exporter des données au format Xls en utilisant angular js. J'ai beaucoup cherché sur internet pour la fonctionnalité d'exportation ou de n'importe quelle bibliothèque pour angular js donc je peux le faire ou, au moins, je peux avoir l'idée de la façon dont à l'exportation. Je n'ai pas de code ou de travail à montrer ici.

J'ai besoin de conseils. Merci de m'aider sur ce point.

Merci d'avance.

Mise à jour:

J'ai une donnée qui est un tableau d'objets et je suis itération que sur l'INTERFACE utilisateur dans une table. Mon backend est node.js et frontend sont angular js.

Mon problème est que si nous avons les données à partir du serveur et je l'utilise sur l'INTERFACE utilisateur, comment puis-je utiliser les mêmes données pour l'exportation au format Xls en utilisant angular js. Je ne veux pas donner un appel sur le backend pour extraire les données et de les exporter que.

Dans le tableau existant, l'utilisateur peut sélectionner la case à cocher (n'Importe quel nombre de lignes ou de toutes les lignes) pour extraire les données au format Xls.

Dans node.js j'ai utilisé nœud module dont le nom est: Excel et il est disponible sur nodemodules site.

Mes données est comme ça:

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

Je veux la solution en utilisant angularjs ou tout angularjs bibliothèque.

Quelle est la question? À partir de ce que je lis vous savez comment faire de l'exportation, correct? Si vous savez comment le faire à l'exportation qu'est-ce que vous devez savoir à partir d'un AngularJS perspective de recevoir votre tâche?
merci de montrer votre intérêt pour cette question. Je m mise à jour de ma ques.
Je crois que la seule façon de le faire est de faire un appel vers le serveur. JavaScript (sur le front-end au moins) n'a pas les capacités pour faire ce genre de chose.

InformationsquelleAutor w3uiguru | 2014-02-10

63

Un bon moyen pour ce faire est d'utiliser Angulaire pour générer un <table> et l'utilisation FileSaver.js à la sortie de la table comme une .fichier xls pour l'utilisateur à télécharger. Excel sera en mesure d'ouvrir la table HTML comme une feuille de calcul.
```
<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>
```
Appel d'Export:
```
var blob = new Blob([document.getElementById('exportable').innerHTML], {
        type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
    });
    saveAs(blob, "Report.xls");
};
```
Démo: http://jsfiddle.net/TheSharpieOne/XNVj3/1/

Mise à jour de la démo avec le case de la fonctionnalité et de la question des données.
Démonstration: http://jsfiddle.net/TheSharpieOne/XNVj3/3/
- Avec Office 2013, vous obtiendrez l'avertissement: "Le format de fichier et l'extension ne correspondent pas... Le fichier peut être corrompu...". Une idée de comment résoudre ce problème?
- J'ai LibreOffice installé et, normalement, n'ont pas de problèmes d'ouverture de fichiers excel, mais je peux ouvrir les fichiers générés par votre code.
- Serait-il possible de le style de la cellule; couleur du texte, couleur de fond, régulièrement/gras/italique?
- Oui, l'utilisation des styles en ligne (le style attribut) sur la <td> et il sera affiché dans excel. Vous pouvez également utiliser <b>/<strong>/<i> balises. Voir jsfiddle.net/TheSharpieOne/XNVj3/303
- J'ai le même problème avez-vous résolu? Si oui, pourriez-vous me fournir une réponse. Merci d'avance
- Le JSFiddles de travail pour moi-est à partir de Chrome 42 et Firefox 38, ouverture dans OpenOffice Calc 4.1, qui je précise qu'à titre d'information pour les autres. @Erlan: Suggestion pour le Bureau 2013 de la question (qui est plus un sauvage, poignarder dans le noir à deviner, puisque je ne pas utiliser MS Office): essayez de renommer le fichier "something.xlsx". Je serais intéressé de savoir si cela aide.
- Lindsay: De Excel refuse d'ouvrir le fichier het même pire... C'est très bizarre solution car le fichier contient le code html et non pas une feuille de style xsl format. C'est pourquoi vous obtenez un message indiquant que le format de fichier et l'extension ne correspondent pas.
- Vous ne pouvez pas résoudre que dans cette solution, car c'est exactement ce que vous faites. Laissez Excel ouvrir un fichier html avec le mauvais poste. Excel est assez gentil pour l'afficher dans un tableau, mais il n'est pas une solution propre.
- Ouais, a indiqué dans la réponse, c'est une solution bon marché. Pas besoin de grands bibliothèque pour créer un format propriétaire, mais l'inconvénient est que l'avertissement qui s'affiche.
- Est-il possible de définir des options telles que word wrap etc trop? La question que je pose est la que les de données est supérieure à la largeur de la colonne. Ainsi, alors que l'impression de l'excel, les données sont tronquées. Et le truc, c'est que je ne suis pas en prenant les données de la page HTML. Je suis de la création des données personnalisées dans le fichier JS et ensuite l'envoyer vers un fichier excel. Ainsi, les balises de style dans ma page HTML ne peut pas être utilisé ici. Merci à l'avance.
- ce n'est pas la bonne solution , si l'on ajoute du style à table sans l'aide en ligne , alors il ne fonctionne pas.
- Ce n'est pas une solution: il est bizarre hack pour tromper Windows pour ouvrir un fichier html avec Excel. Excel essaie de faire quelque chose hors de lui. Ce n'est pas hackoverflow donc je ne comprends pas tous les upvotes.
- Impossible d'utiliser le fichier après génération. Peut-être le type de fichier déclaré avoir besoin d'être changé.
- Cette solution n'est pas bon avec la pagination si j'ai un grand nombre d'enregistrements, car le tableau affiche seront données par la pagination, mais le rapport généré doit avoir tous les documents au lieu d'enregistrements qui ne sont pas visibles sur l'écran dans le tableau
- cela fonctionne avec la pagination. Votre table sera e la pagination, mais votre table d'exportation n'est pas (juste rend tout). Si le problème est que vos données ne sont pas toutes sur le clientnto à l'exportation, alors pas de [purement] côté client la solution pour vous.
- pourquoi avons-nous besoin .xls, pourquoi ne pas tout simplement .csv??
- Vous pouvez utiliser le même brut solution avec CSV, renommer XLS pour excel s'ouvre.
- Il n'est pas possible pour le style d'un document csv de la même manière ou à tous pour autant que je sais.
- salut à tous iam également les mêmes fonctionnalités que j'avais besoin d'augmenter la largeur de la colonne de l'aide d'excel
- est-il possible de convertir xlsx xls au lieu?
- vous devriez être en mesure de simplement changer xls à xlsx dans le saveAs appel.
- ok, c'est l'enregistrement de l'extension "xlsx", mais, en essayant d'ouvrir le fichier, c'est montrer un message d'erreur: "impossible d'ouvrir le fichier 'filename.xlsx" parce que le format de fichier de l'extension de fichier n'est pas valide. Vérifiez que le fichier n'a pas été endommagé et que l'extension du fichier correspond au format du fichier." dans Excel 2016
- Je suis d'erreur comme saveAs n'est pas défini dans controller.js
- La démo ne fonctionne plus, j'ai trouvé la solution: downgrade de la version du serveur de fichiers: npm install [email protected] -enregistrer . Parce que la version 1.3.4 ne prend pas en charge FileSaver.saveAs
InformationsquelleAutor TheSharpieOne
24

Vous pouvez essayer Alasql bibliothèque JavaScript qui peuvent travailler de concert avec XLSX.js bibliothèque pour l'exportation facile de Angular.js les données. Ceci est un exemple de contrôleur avec exportData() fonction:
```
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"
  }];
}
```
Voir plein de code HTML et JavaScript pour cet exemple dans jsFiddle.

Mis à JOUR un Autre exemple avec la coloration des cellules.

Aussi, vous devez inclure deux bibliothèques:
- alasql.min.js
- xlsx.core.min.js
- comment puis-je donner un peu de css à-tête?? comme le gras et la couleur de l'en-tête et un blanc de couleur de la ligne juste en dessous de l'en-tête??
- l'exemple de la jsFiddler produit un vide .fichier xlsx. est-ce quelque chose que vous pouvez résoudre ce problème? merci de les tester avant de les publier.
- Maintenant, il fonctionne. Désolé pour le dérangement.
- Maintenant AlaSQL prend en charge CSS les propriétés de style dans les cellules. S'il vous plaît, voir l'exemple: jsfiddle.net/agershun/95j0txwx/2
- merci pour la réponse, C'est vraiment bon. Je pense que tous les css ne reflète pas ici. Je travaille sur ubuntu et j'ai de libre office dans lequel seul l'en-tête est en gras et autres css ne fonctionne pas. est-il une solution pour cela?? ce travail sur microsoft office 2013 ou au-dessus??
- Oui, la méthode actuelle (exportation en HTML) fonctionne uniquement pour les MS, mais incompatible avec LibreOffice. Nous allons continuer à travailler sur ce.
- Merci pour l'incroyablement utile post pourquoi dois-je inclure le XLsx.core.min.js il semble fonctionner sans elle? @agershun
- Malheureusement, cela ne génère pas un fichier excel. Il génère un fichier html avec une extension xls comme TheSharpieOne réponse.
- Mais il peut générer de véritables fichiers xlsx!: jsfiddle.net/gd7jex9s. Il utilise cette lib en interne: github.com/SheetJS/js-xlsx
- obtenez cette erreur "Le format de fichier et l'extension ne correspondent pas... Le fichier peut être corrompu" une idée de comment résoudre ce problème?
InformationsquelleAutor agershun
15

Quand j'ai besoin de quelque chose de semblable, ng-csv et d'autres solutions ici n'a pas complètement de l'aide. Mes données dans $champ d'application et il n'y avait pas de tables de le montrer. Donc, j'ai construit une directive à l'exportation de données vers Excel à l'aide Sheet.js (xslsx.js) et FileSaver.js.

Voici ma solution emballé.

Par exemple, les données sont:
```
$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"
    }
];
```
J'ai eu à préparer les données en tant que tableau de tableaux pour mon directive dans mon 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]);
});
```
Enfin, ajouter la directive à mon modèle. Il montre un bouton. (Voir le violon).
```
<div excel-export export-data="exportData" file-name="{{fileName}}"></div>
```
- a travaillé comme un charme merci, et maintenant pour creuser et essayer de comprendre 🙂 j'ai besoin de comprendre pourquoi jszip est nécessaire
- Je suis content que cela vous a aidé. S'il vous plaît commentaire si vous trouvez quelque chose de mieux. 😉
- Cette solution fonctionne pour NWJS application!!!
- Fonctionne comme un charme!! Merci!!!!!
InformationsquelleAutor Kursad Gulseven
11

Si vous chargez vos données en ng-grille, vous pouvez utiliser le plugin d'export CSV. Le plugin crée un bouton avec la grille des données au format csv à l'intérieur d'une balise href.

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

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

Mettre à jour les liens que la bibliothèque fut renommé:

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

La page de la bibliothèque: http://ui-grid.info/

De la Documentation sur l'export csv : http://ui-grid.info/docs/#/tutorial/206_exporting_data

InformationsquelleAutor debovis

Un point de départ pourrait être d'utiliser cette directive (ng-csv) il suffit de télécharger le fichier au format csv et c'est quelque chose que excel peut comprendre

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

Peut-être que vous pouvez adapter ce code (lien mis à jour):

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

Bien qu'il semble feuille de calcul xml (il vous avertit avant d'ouvrir le fichier si vous choisissez d'ouvrir le fichier il s'ouvrira correctement)

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))
  }
})()

le jsfiddle lien est invlaid - erreur 404
Un autre bon lien sur un fichier csv / excel et angularjs angularjs4u.com/modules/...
Mis à jour le jsfiddle lien
je suis également en utilisant le même code mais il ne fonctionne pas dans IE et Firefox aider comment le résoudre

InformationsquelleAutor Braulio

Essayer ci-dessous personnalisé avec nom de fichier:

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

Salut, j'utilise ce code, mais j'ai quelques problèmes avec les caractères et le nombre ne pas afficher correctement
comment u peut faire pour l'export csv?

InformationsquelleAutor Ravikant Kushwaha

$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

Veuillez fournir des explications en plus du code.

InformationsquelleAutor Mr.Ngo

0

J'ai eu ce problème et j'ai fait un outil pour exporter un tableau HTML dans un fichier CSV. Le problème que j'avais avec FileSaver.js c'est que cet outil attrape la table avec format html, c'est pourquoi certaines personnes ne pouvez pas ouvrir le fichier dans excel ou google.
Tout ce que vous avez à faire est d'exporter le fichier js et ensuite appeler la fonction.
C'est le github url https://github.com/snake404/tableToCSV si quelqu'un a le même problème.

InformationsquelleAutor snake_404
0

Nous avons besoin d'un fichier JSON dont nous avons besoin pour l'exportation dans le contrôleur de angularjs et nous devrions être en mesure d'appeler à partir du fichier HTML. Nous allons regarder les deux. Mais avant de commencer, nous devons d'abord ajouter deux fichiers dans notre angulaire de la bibliothèque. Ces deux fichiers sont json-export-excel.js et filesaver.js. En outre, nous avons besoin d'inclure la dépendance dans le module angulaire. Si les deux premières étapes peuvent être résumées comme suit -

1) Ajouter json-export.js et filesaver.js dans votre angulaire de la bibliothèque.

2) Comprennent la dépendance de ngJsonExportExcel dans votre angulaire module.
```
      var myapp = angular.module('myapp', ['ngJsonExportExcel'])
```
Maintenant que nous avons inclus les fichiers nécessaires nous pouvons nous déplacer sur les modifications qui doivent être apportées dans le fichier HTML et le contrôleur. Nous supposons que json est en cours de création sur le contrôleur soit manuellement, soit en faisant un appel en arrière-plan.

HTML :
```
Current Page as Excel
All Pages as Excel 
```
Dans l'application, j'ai travaillé, j'ai apporté paginé résultats depuis le backend. Donc, j'avais deux options pour l'exportation vers excel. Un pour la page en cours et l'autre pour toutes les données. Une fois que l'utilisateur sélectionne une option, un appel au contrôleur qui prépare un json (liste). Chaque objet dans la liste constitue une ligne dans excel.

Lire plus à https://www.oodlestechnologies.com/blogs/Export-to-excel-using-AngularJS

InformationsquelleAutor Lovekush

Vous devez vous connecter pour publier un commentaire.