2017-02-21 6 views
-1

Ich habe eine einfache Tabelle in HTML-Datei erstellt. Jetzt muss ich es in Angular JS im PDF-, Excel- oder CSV-Format exportieren lassen? Gibt es einen einfachen Weg, das zu tun?Wie HTML-Tabelle in Angular JS exportieren?

+0

eine benutzerdefinierte Raster wie UI-Gitter verwenden http://ui-grid.info/ –

Antwort

2

Hier ist ein Beispiel, das HTML-Tabelle exportiert, können Sie als PDF, CSV, XLSX und andere unterstützte Formate von Browser speichern.

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function ($scope) { 
 
    $scope.exportData = function() { 
 
     var blob = new Blob([document.getElementById('exportable').innerHTML], { 
 
      type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" 
 
     }); 
 
     saveAs(blob, "Report Example.xls"); 
 
    }; 
 

 
    $scope.items = [{ 
 
     name: "John Smith", 
 
     email: "[email protected]", 
 
     dob: "1985-10-10" 
 
    }, { 
 
     name: "Jane Smith", 
 
     email: "[email protected]", 
 
     dob: "1988-12-22" 
 
    }, { 
 
     name: "Jan Smith", 
 
     email: "[email protected]", 
 
     dob: "2010-01-02" 
 
    }, { 
 
     name: "Jake Smith", 
 
     email: "[email protected]", 
 
     dob: "2009-03-21" 
 
    }, { 
 
     name: "Josh Smith", 
 
     email: "[email protected]", 
 
     dob: "2011-12-12" 
 
    }, { 
 
     name: "Jessie Smith", 
 
     email: "[email protected]", 
 
     dob: "2004-10-12" 
 
    }] 
 
});
<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script> 
 
</head> 
 
<body> 
 
<div ng-controller="myCtrl"> 
 
    <button ng-click="exportData()">Export</button> 
 
    <br /> 
 
    <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> 
 
</div> 
 
</body> 
 
</html>

+0

Danke so viel .. das funktioniert :) – Teddu

+0

Können wir das auch für pdf tun? – Teddu

+1

Sie benötigen 'jsPdf' Bibliothek, um Ihre' html' als 'pdf' zu speichern, hier ist das Beispiel http://plnkr.co/edit/5NonsdQ23nXwFchV01sB?p=preview – nivas