Exporter des données au format CSV, Excel, PDF dans AngularJS

Je veux ajouter exporter les données au format CSV, Excel, PDF au format fonctionnalité dans mon application.

Je suis bâtiment de l'application en utilisant angularjs 1.2.16.

Exporter les données dans Excel

J'ai utilisé

<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>

d'exporter une table vers 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.

L'exportation des données en CSV, PDF

De la même manière que je veux exporter les données en CSV et PDF.

J'ai utilisé http://www.directiv.es/ng-csv pour exporter les données en CSV, mais il ne fonctionne pas bien dans ubuntu libre office (fichier est de montrer des données corrompues).

Quelqu'un peut me dire comment faire pour exporter les données en format CSV Excel et PDF dans angularjs?

source d'informationauteur user sks

  1. 14

    Vous pouvez exporter des données à partir d'AngularJS pour XLS, XLSX, CSV, et dans l'ONGLET formats avec Alasql bibliothèque JavaScript avec XLSX.js.

    Comprennent deux bibliothèques dans le code:

    D'exporter les 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}];
};

    Puis créer un bouton (ou tout autre lien) dans le HTML:

    <div ng-controller="myCtrl">
    <button ng-click="exportData()">Export</button>
</div>

    Essayer cet exemple dans jsFiddle.

    Pour enregistrer les données en format CSV CSV() fonction:

    alasql("SELECT * INTO CSV('mydata.csv', {headers:true}) FROM ?",[$scope.mydata]);

    Ou utiliser TXT(), CSV(), TAB(), XLS(), XLSX() fonctions pour une bonne formats de fichiers.

  2. 5

    Si vous êtes satisfait avec un fichier CSV, puis le ngCsv module est le chemin à parcourir. Vous n'avez pas de charge des éléments du DOM, mais l'exportation d'un tableau directement. Ici vous pouvez voir un échantillon de ngCsv dans l'action.

    Le code 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}];                            
}
  3. 2

    saveAs; modifier l'extension de 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");
  4. 1

    J'ai travaillé par le biais de plusieurs méthodes et ses conclusions sont les suivantes, 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.");
}

    Bravo à ceux qui ont contribué de cours dans les divers article.s

  5. 0

    nous pouvons exporter les données 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
    Remarque: Cette mise en œuvre ne serait pas exécutée dans IE

    Quoi avez-vous besoin?
    Angularjs
    Jquery.js
    Les 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"
}
];
});