I made one JSBIN and things are working fine but the problem is, I cant rename the file and add extension.
Another problem is the data is only from static DOM not from the ng-repeat I put using controller.
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.data = [{
one: "Column One",
two: "Column Two",
three: "Column Three"
}, {
one: "Column One",
two: "Column Two",
three: "Column Three"
}, {
one: "Column One",
two: "Column Two",
three: "Column Three"
}];
});
app.directive("myExportData", function() {
return {
restrict: "EA",
link: function(scope, ele, attr) {
ele.attr('value', "Export Table data into Excel");
ele.bind('click', function() {
console.log($('#dvData').html());
window.open('data:application/vnd.ms-excel,' + $('#dvData').html());
});
}
};
});
HTML Goes here like
<body ng-controller="ctrl">
<div id="dvData">
<table>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
</tr>
<tr ng-repeat="obj in data">
<td>{{obj.one}}</td>
<td>{{obj.two}}</td>
<td>{{obj.three}}</td>
</tr>
</table>
<input my-export-data type="button" id="btnExport" />
</div>
</body>
