Exporter des données en format CSV, Excel, PDF en AngularJS
je veux ajouter des données de table d'exportation dans CSV, Excel, Format PDF fonctionnalité dans mon application.
je construis app en utilisant angularjs 1.2.16.
exporter des données dans Excel
j'ai utilisé
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
pour exporter un tableau XLS format à l'aide de code suivant :
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "report.xls");
code ci-dessus fonctionne très bien.
Exporter des données au format CSV, PDF
de la même manière que je veux exporter des données en CSV et PDF format.
I have used http://www.directiv.es/ng-csv pour exporter des données dans CSV mais il ne fonctionne pas très bien dans ubuntu Libre office (le fichier montre des données corrompues).
Est-ce que quelqu'un peut me dire comment exporter des données de table en format CSV,Excel et PDF en angularjs?
5 réponses
vous pouvez exporter des données D'AngularJS vers les formats XLS, XLSX, CSV et TAB avec Alasql bibliothèque JavaScript avec XLSX.js.
incluez deux bibliothèques dans le code:
exporter des données au format Excel créer une fonction dans le code du contrôleur:
function myCtrl($scope) {
$scope.exportData = function () {
alasql('SELECT * INTO XLSX("mydata.xlsx",{headers:true}) FROM ?',[$scope.items]);
};
$scope.items = [{a:1,b:10},{a:2,b:20},{a:3,b:30}];
};
Ensuite créer un bouton (ou tout autre lien) HTML:
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
</div>
cet exemple dans jsFiddle.
pour sauvegarder les données au format CSV, utilisez la fonction CSV ():
alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);
ou utilisez les fonctions TXT(), CSV(), TAB(), XLS(), XLSX() pour les formats de fichier appropriés.
si vous êtes satisfait d'un fichier CSV, alors le module ngCsv est la solution. Vous ne chargez pas les éléments du DOM mais exportez un tableau directement. Ici vous pouvez voir un échantillon de ngCsv en action.
Le html:
<h2>Export {{sample}}</h2>
<div>
<button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>
et le js:
angular.module('csv', ['ngCsv']);
function Main($scope) {
$scope.sample = "Sample";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
}
saveAs; pour modifier l'extension du fichier enregistré, par exemple: "f:\folder\report.html" répertoire?
var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
saveAs(blob, "report.xls");
j'ai travaillé sur plusieurs approches et j'ai conclu ce qui suit, typesafe (DefinitelyTyped):
exportAsExcel(tableId: string, fileName: string, linkElement: any) {
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(decodeURI(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(\w+)}/g, function (m, p) {
return c[p];
});
};
// get the table data
var table = document.getElementById(tableId);
var ctx = {
worksheet: fileName,
table: table.innerHTML
};
// if browser is IE then save the file as blob, tested on IE10 and IE11
var browser = window.navigator.appVersion;
if ((browser.indexOf('Trident') !== -1 && browser.indexOf('rv:11') !== -1) ||
(browser.indexOf('MSIE 10') !== -1)) {
var builder = new MSBlobBuilder();
builder.append(uri + format(template, ctx));
var blob = builder.getBlob('application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
window.navigator.msSaveBlob(blob, fileName + '.xlsx');
} else {
var element = document.getElementById(linkElement);
var a = document.createElement('a');
a.href = uri + base64(format(template, ctx));
a.target = '_blank';
a.setAttribute('download', fileName + '.xlsx');
document.body.appendChild(a);
a.click();
}
toastr.success("Awesome!", "We've created an Excel report for you and you should get it as a download in your browser.");
}
félicitations à ceux qui ont contribué bien sûr dans les différents articles.s
nous pouvons exporter des données à partir d'une table dans divers formats, y compris JSON, Xml, Pdf .....
Vous pouvez trouver des explications détaillées http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html Note: cette implémentation ne fonctionnerait pas dans IE
Quoi avez-vous besoin? Angularjs Jquery.js Fichiers référencés ci-dessous tableExport.js, JqueryBase64.js, html2canvas.js, base64.js, Jspdf.js, sprintf.js
<script type="text/javascript">
var myAppModule = angular.module('myApp', []);
myAppModule.controller('myCtrl', function ($scope) {
$scope.exportData = function () {
$('#customers').tableExport({ type: 'json', escape: 'false' });
};
$scope.items = [
{
"FirstName": "Prathap",
"LastName": "Kudupu",
"Address": "Near Anjana Beach"
},
{
"FirstName": "Deepak",
"LastName": "Dsouza",
"Address": "Near Nariman Point"
}
];
});