2017-02-21 8 views
-1

Я создал простую таблицу в файле HTML. Теперь мне нужно экспортировать его в формате PDF или Excel или CSV в Angular JS? Есть ли простой способ сделать это?Как экспортировать HTML-таблицу в Angular JS?

+0

Используйте пользовательскую сетку, как UI-сетки http://ui-grid.info/ –

ответ

2

Вот пример, который экспортирует таблицу html, которую вы можете сохранить в виде pdf, csv, xlsx и других поддерживаемых форматов браузером.

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

Спасибо так много .. это работало :) – Teddu

+0

Можем ли мы сделать это для PDF тоже? – Teddu

+1

вам нужна библиотека 'jsPdf', чтобы сохранить ваш' html' как 'pdf', вот пример http://plnkr.co/edit/5NonsdQ23nXwFchV01sB?p=preview – nivas