I have created a simple table in HTML file. Now I need to make it exported in PDF or Excel or CSV format in Angular JS? Is there any easy way to do that?
Here is an example which exports html table, you can save as pdf, csv, xlsx and other supported formats by browser.
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: "j.smith@example.com",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "jane.smith@example.com",
dob: "1988-12-22"
}, {
name: "Jan Smith",
email: "jan.smith@example.com",
dob: "2010-01-02"
}, {
name: "Jake Smith",
email: "jake.smith@exmaple.com",
dob: "2009-03-21"
}, {
name: "Josh Smith",
email: "josh@example.com",
dob: "2011-12-12"
}, {
name: "Jessie Smith",
email: "jess@example.com",
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>