web-dev-qa-db-fra.com

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

Je souhaite ajouter des données de table d'exportation au format CSV, Excel, PDF dans mon application.

Je crée une application 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 la table au format XLS en utilisant le code suivant:

var blob = new Blob([document.getElementById('exportable').innerHTML], {
    type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "report.xls");

le code ci-dessus fonctionne bien.

Exporter des données en CSV, PDF

De la même manière, je veux exporter des données au format CSV et PDF format.
J'ai utilisé http://www.directiv.es/ng-csv pour exporter des données en CSV mais cela ne fonctionne pas correctement dans ubuntu libre office (le fichier montre des données corrompues) .
Quelqu'un peut-il me dire comment exporter des données de table au format CSV, Excel et PDF au format angularjs?

javascriptangularjsexcelpdf
17
user sks

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:

Pour exporter des données au format Excel, créez 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}];
};

Créez ensuite un bouton (ou tout autre lien) en HTML:

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

Essayez cet exemple dans jsFiddle.

Pour enregistrer des 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.

14
agershun

Si vous êtes satisfait d'un fichier CSV, le module ngCsv est le chemin à parcourir. Vous ne chargez pas d'éléments du DOM mais exportez directement un tableau. 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 les js:

angular.module('csv', ['ngCsv']);

function Main($scope) {
    $scope.sample = "Sample";
    $scope.getArray = [{a: 1, b:2}, {a:3, b:4}];                            
}
6
Shrinivas Pai

enregistrer sous; Pour modifier l'extension de fichier enregistrée, par exemple: répertoire "f:\folder\report.html"?

var blob = new Blob([document.getElementById('exportable').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" }); 
saveAs(blob, "report.xls");
3
Osman Selvi

J'ai travaillé à travers 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.");
    }

Bravo à ceux qui ont bien sûr contribué dans les différents articles.

2
Marco

nous pouvons exporter les données d'une table dans différents 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 implémentation ne s'exécuterait pas dans IE

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

    });
0
Prathap Kudupu