javascript - buttons - Exportar datos en formato CSV, Excel, PDF en AngularJS
importar datos de excel a javascript (5)
He trabajado a través de varios enfoques y concluyo lo siguiente, seguro de tipo (DefinitelyTyped):
exportAsExcel(tableId: string, fileName: string, linkElement: any) {
var uri = ''data:application/vnd.ms-excel;base64,'',
template = ''<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'',
base64 = function (s) {
return window.btoa(decodeURI(encodeURIComponent(s)));
},
format = function (s, c) {
return s.replace(/{(/w+)}/g, function (m, p) {
return c[p];
});
};
// get the table data
var table = document.getElementById(tableId);
var ctx = {
worksheet: fileName,
table: table.innerHTML
};
// if browser is IE then save the file as blob, tested on IE10 and IE11
var browser = window.navigator.appVersion;
if ((browser.indexOf(''Trident'') !== -1 && browser.indexOf(''rv:11'') !== -1) ||
(browser.indexOf(''MSIE 10'') !== -1)) {
var builder = new MSBlobBuilder();
builder.append(uri + format(template, ctx));
var blob = builder.getBlob(''application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'');
window.navigator.msSaveBlob(blob, fileName + ''.xlsx'');
} else {
var element = document.getElementById(linkElement);
var a = document.createElement(''a'');
a.href = uri + base64(format(template, ctx));
a.target = ''_blank'';
a.setAttribute(''download'', fileName + ''.xlsx'');
document.body.appendChild(a);
a.click();
}
toastr.success("Awesome!", "We''ve created an Excel report for you and you should get it as a download in your browser.");
}
Felicitaciones a aquellos que contribuyeron, por supuesto, en los diversos artículos.
Quiero agregar datos de tabla de exportación en CSV, Excel, funcionalidad de formato PDF en mi aplicación.
Estoy construyendo la aplicación usando angularjs 1.2.16.
Exportar datos en Excel
he utilizado
<script src="https://rawgithub.com/eligrey/FileSaver.js/master/FileSaver.js" type="text/javascript"></script>
para exportar la tabla a formato XLS usando el siguiente código:
var blob = new Blob([document.getElementById(''exportable'').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "report.xls");
El código anterior está funcionando bien.
Exportar datos en CSV, PDF
De la misma manera quiero exportar datos en formato CSV y PDF.
He utilizado http://www.directiv.es/ng-csv para exportar datos en CSV, pero no funciona bien en la oficina de ubuntu libre (el archivo muestra datos dañados).
¿Alguien puede decirme cómo exportar datos de tablas en formato CSV, Excel y PDF en angularjs?
Podemos exportar datos de una tabla a varios formatos, incluyendo Json, Xml, Pdf ...
Puede encontrar una explicación detallada en http://www.prathapkudupublog.com/2015/10/angular-export-to-table.html Nota: esta implementación no se ejecutará en IE
¿Que necesitas? Archivos Angularjs Jquery.js a los que se hace referencia a continuación tableExport.js, JqueryBase64.js, html2canvas.js, base64.js, Jspdf.js, sprintf.js
<script type="text/javascript">
var myAppModule = angular.module(''myApp'', []);
myAppModule.controller(''myCtrl'', function ($scope) {
$scope.exportData = function () {
$(''#customers'').tableExport({ type: ''json'', escape: ''false'' });
};
$scope.items = [
{
"FirstName": "Prathap",
"LastName": "Kudupu",
"Address": "Near Anjana Beach"
},
{
"FirstName": "Deepak",
"LastName": "Dsouza",
"Address": "Near Nariman Point"
}
];
});
Puede exportar datos de AngularJS a los formatos XLS, XLSX, CSV y TAB con la biblioteca de JavaScript de XLSX.js con XLSX.js
Incluye dos bibliotecas en el código:
Para exportar datos a formato Excel, cree una función en el código del controlador:
function myCtrl($scope) {
$scope.exportData = function () {
alasql(''SELECT * INTO XLSX("mydata.xlsx",{headers:true}) FROM ?'',[$scope.items]);
};
$scope.items = [{a:1,b:10},{a:2,b:20},{a:3,b:30}];
};
Luego crea un botón (o cualquier otro enlace) en HTML:
<div ng-controller="myCtrl">
<button ng-click="exportData()">Export</button>
</div>
Prueba este ejemplo en jsFiddle.
Para guardar datos en formato CSV use la función CSV ():
alasql("SELECT * INTO CSV(''mydata.csv'', {headers:true}) FROM ?",[$scope.mydata]);
O use las funciones TXT (), CSV (), TAB (), XLS (), XLSX () para los formatos de archivo adecuados.
Si está satisfecho con un archivo CSV, entonces el módulo ngCsv es el camino a seguir. No carga elementos del DOM sino que exporta una matriz directamente. Aquí puedes ver una muestra de ngCsv en acción.
El html:
<h2>Export {{sample}}</h2>
<div>
<button type="button" ng-csv="getArray" filename="test.csv">Export</button>
</div>
y los js:
angular.module(''csv'', [''ngCsv'']);
function Main($scope) {
$scope.sample = "Sample";
$scope.getArray = [{a: 1, b:2}, {a:3, b:4}];
}
guardar como; Para cambiar la extensión de archivo registrada, por ejemplo: ¿directorio "f: / folder / report.html"?
var blob = new Blob([document.getElementById(''exportable'').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8" });
saveAs(blob, "report.xls");