javascript - read - js-xlsx tutorial
Exportar a xls usando angularjs (8)
Cuando necesitaba algo similar, ng-csv y otras soluciones aquí no ayudaban por completo. Mis datos estaban en $ scope y no había tablas que lo mostraran. Entonces, construí una directiva para exportar datos dados a Excel usando Sheet.js (xslsx.js) y FileSaver.js.
Por ejemplo, los datos son:
$scope.jsonToExport = [
{
"col1data": "1",
"col2data": "Fight Club",
"col3data": "Brad Pitt"
},
{
"col1data": "2",
"col2data": "Matrix Series",
"col3data": "Keanu Reeves"
},
{
"col1data": "3",
"col2data": "V for Vendetta",
"col3data": "Hugo Weaving"
}
];
Tuve que preparar los datos como una matriz de matrices para mi directiva en mi controlador:
$scope.exportData = [];
// Headers:
$scope.exportData.push(["#", "Movie", "Actor"]);
// Data:
angular.forEach($scope.jsonToExport, function(value, key) {
$scope.exportData.push([value.col1data, value.col2data, value.col3data]);
});
Finalmente, agregue directiva a mi plantilla. Muestra un botón. (Ver el violín ).
<div excel-export export-data="exportData" file-name="{{fileName}}"></div>
Estoy trabajando en la aplicación angular js y me quedé atrapado en una situación en la que tengo que exportar datos a Xls usando angular js. He buscado mucho en Internet para la funcionalidad de exportación o cualquier biblioteca para js angulares, así que puedo hacerlo o al menos puedo tener la idea de cómo exportar. No tengo ningún código ni trabajo para mostrar aquí.
Necesito sugerencias. Por favor ayúdame con esto.
Gracias por adelantado.
Actualizar:
Tengo una información que es una matriz de objetos y la estoy iterando en la interfaz de usuario en una tabla. Mi backend es node.js y frontend son js angulares.
Mi problema es que si tenemos los datos del servidor y los estoy utilizando en la interfaz de usuario, ¿cómo puedo usar los mismos datos para exportar a Xls usando js angulares? No quiero volver a llamar en el back-end para extraer los datos y exportarlos.
En la tabla existente, el usuario puede seleccionar la casilla de verificación (Cualquier número de filas o todas las filas) para extraer los datos a Xls.
En node.js he usado el módulo de nodo cuyo nombre es: Excel y está disponible en el sitio nodemodules.
Mis datos son así:
"data": [
{
"Name": "ANC101",
"Date": "10/02/2014",
"Terms": ["samsung", "nokia": "apple"]
},{
"Name": "ABC102",
"Date": "10/02/2014",
"Terms": ["motrolla", "nokia": "iPhone"]
}
]
Quiero la solución usando angularjs o cualquier biblioteca angularjs.
Pruebe a continuación con el nombre de archivo personalizado:
$scope.exportData= function(){
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(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(/w+)}/g, function(m, p) { return c[p]; }) }
var table = document.getElementById("searchResult");
var filters = $(''.ng-table-filters'').remove();
var ctx = {worksheet: name || ''Worksheet'', table: table.innerHTML};
$(''.ng-table-sort-header'').after(filters) ;
var url = uri + base64(format(template, ctx));
var a = document.createElement(''a'');
a.href = url;
a.download = ''Exported_Table.xls'';
a.click();
};
Puede probar la biblioteca JavaScript de Alasql que puede funcionar junto con la biblioteca XLSX.js para exportar datos de Angular.js fácilmente. Este es un ejemplo de controlador con función exportData ():
function myCtrl($scope) {
$scope.exportData = function () {
alasql(''SELECT * INTO XLSX("john.xlsx",{headers:true}) FROM ?'',[$scope.items]);
};
$scope.items = [{
name: "John Smith",
email: "[email protected]",
dob: "1985-10-10"
}, {
name: "Jane Smith",
email: "[email protected]",
dob: "1988-12-22"
}];
}
Consulte el código HTML y JavaScript completo para este ejemplo en jsFiddle.
ACTUALIZADO Otro ejemplo con celdas para colorear .
También necesita incluir dos bibliotecas:
Si carga sus datos en ng-grid, puede usar el complemento de exportación CSV. El complemento crea un botón con los datos de la cuadrícula como csv dentro de una etiqueta href.
http://angular-ui.github.io/ng-grid/
https://github.com/angular-ui/ng-grid/blob/2.x/plugins/ng-grid-csv-export.js
Actualización de enlaces a medida que la biblioteca cambia de nombre:
Enlace de Github: https://github.com/angular-ui/ui-grid
Página de la biblioteca: http://ui-grid.info/
Documentación sobre la exportación de csv: http://ui-grid.info/docs/#/tutorial/206_exporting_data
Tuve este problema e hice una herramienta para exportar una tabla HTML a un archivo CSV. El problema que tuve con FileSaver.js es que esta herramienta toma la tabla con formato html, por eso algunas personas no pueden abrir el archivo en Excel o Google. Todo lo que tienes que hacer es exportar el archivo js y luego llamar a la función. Esta es la URL de github https://github.com/snake404/tableToCSV si alguien tiene el mismo problema.
Un punto de partida podría ser usar esta directiva (ng-csv) simplemente descargue el archivo como csv y eso es algo que Excel puede entender
http://ngmodules.org/modules/ng-csv
Tal vez puedas adaptar este código (enlace actualizado):
http://jsfiddle.net/Sourabh_/5ups6z84/2/
A pesar de que parece XMLSS (le advierte antes de abrir el archivo, si elige abrir el archivo, se abrirá correctamente)
var tableToExcel = (function() {
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(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(/w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || ''Worksheet'', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
Una forma económica de hacerlo es usar Angular para generar una <table> y usar FileSaver.js para generar la tabla como un archivo .xls para que el usuario descargue. Excel podrá abrir la tabla HTML como una hoja de cálculo.
<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>
Llamada de exportación:
var blob = new Blob([document.getElementById(''exportable'').innerHTML], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"
});
saveAs(blob, "Report.xls");
};
Demostración: http://jsfiddle.net/TheSharpieOne/XNVj3/1/
Demostración actualizada con funcionalidad de casillas de verificación y datos de preguntas. Demostración: http://jsfiddle.net/TheSharpieOne/XNVj3/3/
$scope.ExportExcel= function () { //function define in html tag
//export to excel file
var tab_text = ''<table border="1px" style="font-size:20px" ">'';
var textRange;
var j = 0;
var tab = document.getElementById(''TableExcel''); // id of table
var lines = tab.rows.length;
// the first headline of the table
if (lines > 0) {
tab_text = tab_text + ''<tr bgcolor="#DFDFDF">'' + tab.rows[0].innerHTML + ''</tr>'';
}
// table data lines, loop starting from 1
for (j = 1 ; j < lines; j++) {
tab_text = tab_text + "<tr>" + tab.rows[j].innerHTML + "</tr>";
}
tab_text = tab_text + "</table>";
tab_text = tab_text.replace(/<A[^>]*>|<//A>/g, ""); //remove if u want links in your table
tab_text = tab_text.replace(/<img[^>]*>/gi, ""); // remove if u want images in your table
tab_text = tab_text.replace(/<input[^>]*>|<//input>/gi, ""); // reomves input params
// console.log(tab_text); // aktivate so see the result (press F12 in browser)
var fileName = ''report.xls''
var exceldata = new Blob([tab_text], { type: "application/vnd.ms-excel;charset=utf-8" })
if (window.navigator.msSaveBlob) { // IE 10+
window.navigator.msSaveOrOpenBlob(exceldata, fileName);
//$scope.DataNullEventDetails = true;
} else {
var link = document.createElement(''a''); //create link download file
link.href = window.URL.createObjectURL(exceldata); // set url for link download
link.setAttribute(''download'', fileName); //set attribute for link created
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
//html of button