Exporter vers xls en utilisant angularjs
Je travaille sur js app angulaire et je suis coincé dans une situation dans laquelle je dois exporter des données vers xls à l'aide de js angulaire. J'ai beaucoup cherché sur Internet pour les fonctionnalités d'exportation ou n'importe quelle bibliothèque pour les js angulaires afin que je puisse le faire ou du moins que je puisse avoir une idée sur la façon d'exporter. Je n'ai pas de code ou de travail à montrer ici.
J'ai besoin de suggestions. S'il vous plaît aidez-moi sur ce point.
Merci d'avance.
Mettre à jour:
J'ai une donnée qui est un tableau d'objets et je l'itère sur l'interface utilisateur dans une table. Mon backend est node.js et frontend sont angulaires js.
Mon problème est que si nous avons les données du serveur et que j'utilise l'interface utilisateur, comment puis-je utiliser les mêmes données pour exporter au format Xls à l'aide de js angulaire. Je ne veux plus appeler le serveur pour extraire les données et les exporter.
Dans la table existante, l'utilisateur peut sélectionner la case à cocher (Nombre de lignes ou toutes les lignes) pour extraire les données dans Xls.
Dans node.js, j'ai utilisé un module de noeud dont le nom est: Excel et qui est disponible sur le site nodemodules.
Mes données sont 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 n’importe quelle bibliothèque angularjs.
Une méthode peu coûteuse consiste à utiliser Angular pour générer un <table> et à utiliser FileSaver.js pour afficher le tableau sous forme de fichier .xls à télécharger par l'utilisateur. Excel pourra ouvrir le tableau HTML sous forme de 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'exportation:
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 fonctionnalité de case à cocher et données de la question . Démo: http://jsfiddle.net/TheSharpieOne/XNVj3/3/
Vous pouvez essayer Alasql bibliothèque JavaScript qui peut fonctionner avec la bibliothèque XLSX.js pour exporter facilement les données Angular.js. Voici un exemple de contrôleur avec la fonction 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"
}];
}
Voir le code HTML et JavaScript complet pour cet exemple dans jsFiddle.
UPDATED Un autre exemple avec des cellules de coloration .
Aussi, vous devez inclure deux bibliothèques:
Lorsque j'ai eu besoin de quelque chose de similaire, ng-csv et d'autres solutions ici ne m'ont pas complètement aidé. Mes données étaient en $ scope et aucun tableau ne les montrait. J'ai donc construit une directive pour exporter des données vers Excel à l'aide de Sheet.js (xslsx.js) et FileSaver.js.
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"
}
];
Je devais préparer des données sous forme de tableau de tableaux pour ma directive dans mon contrôleur:
$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, ajoutez une directive à mon modèle. Il montre un bouton. (Voir le violon ).
<div Excel-export export-data="exportData" file-name="{{fileName}}"></div>
Si vous chargez vos données dans ng-grid, vous pouvez utiliser le plug-in d'exportation CSV. Le plug-in crée un bouton avec les données de la grille sous forme de csv dans 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
Mise à jour des liens lorsque la bibliothèque a été renommée:
Lien Github: https://github.com/angular-ui/ui-grid
Page de la bibliothèque: http://ui-grid.info/
Documentation sur l'exportation csv: http://ui-grid.info/docs/#/tutorial/206_exporting_data
Un point de départ pourrait être d’utiliser cette directive (ng-csv), il suffit de télécharger le fichier en tant que csv, ce 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 que cela semble XMLSS (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))
}
})()
Essayez ci-dessous avec un nom de fichier personnalisé:
$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();
};
Nous avons besoin d’un fichier JSON que nous devons exporter dans le contrôleur d’angularjs et nous devrions pouvoir appeler à partir du fichier HTML. Nous allons regarder les deux. Mais avant de commencer, nous devons d’abord ajouter deux fichiers dans notre bibliothèque angulaire. Ces deux fichiers sont json-export-Excel.js et filesaver.js. De plus, nous devons inclure la dépendance dans le module angulaire. Donc, les deux premières étapes peuvent être résumées comme suit -
1) Ajoutez json-export.js et filesaver.js dans votre bibliothèque angulaire.
2) Incluez la dépendance de ngJsonExportExcel dans votre module angulaire.
var myapp = angular.module('myapp', ['ngJsonExportExcel'])
Maintenant que nous avons inclus les fichiers nécessaires, nous pouvons passer aux modifications à apporter au fichier HTML et au contrôleur. Nous supposons qu'un fichier json est créé sur le contrôleur, manuellement ou en appelant le serveur.
HTML:
Current Page as Excel
All Pages as Excel
Dans l'application avec laquelle j'ai travaillé, j'ai apporté des résultats paginés du backend. Par conséquent, j'avais deux options pour exporter vers Excel. Un pour la page en cours et un pour toutes les données. Une fois que l'utilisateur a sélectionné une option, un appel est dirigé vers le contrôleur qui prépare un JSON (liste). Chaque objet de la liste forme une ligne dans Excel.
En savoir plus sur - https://www.oodlestechnologies.com/blogs/Export-to-Excel-using-AngularJS
$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
J'ai eu ce problème et j'ai créé 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 saisit le tableau au format html, c’est pourquoi certaines personnes ne peuvent pas ouvrir le fichier dans Excel ou Google . appelez la fonction . Il s'agit de l'url de github https://github.com/snake404/tableToCSV si quelqu'un a le même problème.