Uno de los gandes problemas de hoy en dia es importar datos de excel y mostrarlo en html, en este artículo te vamos a explicar paso a paso como se realiza esta acción mediante el jquery.
1. Crear el folder.
Vamos a crear un folder en este caso llamado pruebas donde se va alojar todos los archivos para poder hacer la importación de los datos de excel a html, como se muestra en la sigueinte imágen:
Vamos a descargar las 2 librerias que vamos a necesitar para realizar el ejercicio, En esta caso va se el jquery-1.10.2 este lo puedes descargar
aquí y la libreria xls esto lo puedes descargar
aqui.
3. Estructura.
Dentro del directorio prueba vamos a crear el archivo Prueba.html y pegar las dos librerias tanto jquery-1.10.2.js y xls.js. Quedaría la estructura de la siguiente manera:
4. Código:
Dentro del archivo Prueba.html se escribe lo siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Importar Datos de Excel a Html</title>
<script src="xls.js"></script>
<script src="jquery-1.10.2.js"></script>
<script language="JavaScript">
var oFileIn;
//Código JQuery
$(function() {
oFileIn = document.getElementById('my_file_input');
if (oFileIn.addEventListener) {
oFileIn.addEventListener('change', filePicked, false);
}
});
//Método que hace el proceso de importar excel a html
function filePicked(oEvent) {
// Obtener el archivo del input
var oFile = oEvent.target.files[0];
var sFilename = oFile.name;
// Crear un Archivo de Lectura HTML5
var reader = new FileReader();
// Leyendo los eventos cuando el archivo ha sido seleccionado
reader.onload = function(e) {
var data = e.target.result;
var cfb = XLS.CFB.read(data, {
type: 'binary'
});
var wb = XLS.parse_xlscfb(cfb);
// Iterando sobre cada sheet
wb.SheetNames.forEach(function(sheetName) {
// Obtener la fila actual como CSV
var sCSV = XLS.utils.make_csv(wb.Sheets[sheetName]);
var data = XLS.utils.sheet_to_json(wb.Sheets[sheetName], {
header: 1
});
$.each(data, function(indexR, valueR) {
var sRow = "<tr>";
$.each(data[indexR], function(indexC, valueC) {
sRow = sRow + "<td>" + valueC + "</td>";
});
sRow = sRow + "</tr>";
$("#my_file_output").append(sRow);
});
});
};
// Llamar al JS Para empezar a leer el archivo .. Se podría retrasar esto si se desea
reader.readAsBinaryString(oFile);
}
</script>
</head>
<body>
<input type="file" id="my_file_input" />
<table id='my_file_output'></table>
</body>
</html>
|
5. Demostración.
Tenemos la demostración de este código primero en el formulario importamos el archivo excel y luego se muestra los datos de la fila en forma de tabla en html.
Esta es la finalización del artículo espero que le haya servido de ayuda, !Hasta pronto!
muy buen trabo man
ResponderEliminarMuy bueno, pero al momento de elegir el archivo, ya no despliega nada, que puede ser?
ResponderEliminaryo también lo probé y marca erro en la linea 30
Eliminar"var cfb = XLS.CFB.read(data, {" type: 'binary'
});
Este comentario ha sido eliminado por el autor.
EliminarLe diste: npm install ?
Eliminarhttps://HDRamosMendoza.github.io/Perfil-Profesional/
Buenas tardes. Eh probado el demo y funciona muy bien para las extensiones de .csv y .xls.
ResponderEliminarhttps://HDRamosMendoza.github.io/Perfil-Profesional/
Gracias por el aporte.
"Club de Ajedrez" y "laloer92". El demo lo integre aún proyecto actual que estoy trabajando. Me percate que no funciona según espero siempre en cuando que al deben de usar el siguiente tag.
ResponderEliminar> Propiedad de tag CORRECTO: language="JavaScript"
> Propiedad de tag INCORRECTO: type="text/javascript"
https://HDRamosMendoza.github.io/Perfil-Profesional/
(language="JavaScript"). Es para versiones de navegadores antiguos a partir del HTML4 en adelante se usa (type="text/javascript").
ResponderEliminarhttps://HDRamosMendoza.github.io/Perfil-Profesional/
No me funciono!
ResponderEliminarNo me Funciona alguien me puede ayudar, deseo generar en un archivo JSON de la info de Excel y posterior leerla en HTML/JS
ResponderEliminarDe antemano agradezco la atencion a este POST