Exportar JSON a CSV utilizando Angular 1.x (con ng-csv)
Para ver una demostración en línea, haga clic aquí.
Para ver la documentación de ng-csv, haga clic aquí.
HTML
<body ng-app="csvApp">
<br>
<div ng-controller="csvController" class="container" ng-cloack>
<h1>Exportar JSON a CSV utilizando Angular JS</h1>
<br>
<div class="panel panel-default">
<div class="panel-body">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Primer Nombre</th>
<th>Segundo Nombre</th>
<th>Primer Apellido</th>
<th>Segundo Apellido</th>
<th>Fecha Nacimiento</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='reg in datos'>
<td>{{reg.id}}</td>
<td>{{reg.primerNombre}}</td>
<td>{{reg.segundoNombre}}</td>
<td>{{reg.primerApellido}}</td>
<td>{{reg.segundoApellido}}</td>
<td>{{reg.fechaNacimiento}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<button type="button" class="btn btn-default" ng-csv="datos" filename="Datos.csv" csv-header="['Id', 'Primer Nombre', 'Segundo Nombre', 'Primer Apellido', 'Segundo Apellido', 'Fecha Nacimiento']" charset="utf-8"><span class="glyphicon glyphicon-download-alt"> </span>Descargar CSV</button>
<br>
<br>
</div>
</body>
[banner id=”1861″]
JS
var app = angular.module("csvApp", ["ngSanitize", "ngCsv"]);
app.controller("csvController", ["$scope",
function($scope) {
$scope.datos = [{
id: 1,
primerNombre: 'Juan',
segundoNombre: 'Mario',
primerApellido: 'Perez',
segundoApellido: 'Maldonado',
fechaNacimiento: '23-12-1985'
}, {
id: 2,
primerNombre: 'Jorge',
segundoNombre: 'Alfonzo',
primerApellido: 'Quinto',
segundoApellido: 'Marroquin',
fechaNacimiento: '15-01-1988'
}, {
id: 3,
primerNombre: 'Carlos',
segundoNombre: 'Alberto',
primerApellido: 'Vargas',
segundoApellido: 'Martinez',
fechaNacimiento: '09-03-1990'
}, {
id: 4,
primerNombre: 'Mario',
segundoNombre: 'Alvaro',
primerApellido: 'Hernadez',
segundoApellido: 'Morales',
fechaNacimiento: '23-02-1984'
}, {
id: 5,
primerNombre: 'Marlon',
segundoNombre: 'Federico',
primerApellido: 'Lopez',
segundoApellido: 'Padilla',
fechaNacimiento: '01-03-1976'
}, {
id: 6,
primerNombre: 'Daniel',
segundoNombre: 'Francisco',
primerApellido: 'Herrera',
segundoApellido: 'Perdomo',
fechaNacimiento: '22-03-1989'
}, {
id: 7,
primerNombre: 'Cesar',
segundoNombre: 'Jaime',
primerApellido: 'Arroche',
segundoApellido: 'Pedrosa',
fechaNacimiento: '18-02-1987'
}];
}
]);
Para ver una demostración en línea, haga clic aquí.
Para ver la documentación de ng-csv, haga clic aquí.
[banner id=”1861″]
