|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android.
Curso de App inventor 2 en español - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
170G.- Tabla en HTML a Excel xlsx.
 p170G_Tabla_Excel.aia
- Se muestra una tabla, el usuario puede insertar valores en los casilleros de la tabla.
- Al pulsar el botón "Export to Base62", un JavaScript convierte la tabla a Excel xlsx y obtiene su contenido en Base64.
- Esa información en Base64 llega a la app, mediante la extensión KIO4.Base64 convierte el string a archivo y lo guarda en el ASD.
________________________
- Diseño.
________________________
- Bloques.
________________________
- Código.
tabla_a_XLSX_Base64.htm |
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
padding: 5px;
}
</style>
</head>
<body>
<table id="tabla">
<tr>
<th>Celda 1</th>
<th>Celda 2</th>
<th>Celda 3</th>
<th>Celda 4</th>
<th>Celda 5</th>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
<tr>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
<td contenteditable="true"></td>
</tr>
</table>
<button onclick="exportToBase64()">Export to Base64</button>
<script>
function exportToBase64() {
const table = document.getElementById("tabla");
const rows = table.getElementsByTagName("tr");
const workbook = XLSX.utils.book_new();
const sheet = XLSX.utils.table_to_sheet(table);
XLSX.utils.book_append_sheet(workbook, sheet, "Tabla");
const excelData = XLSX.write(workbook, { bookType: 'xlsx', type: 'base64' });
showAlert(excelData);
}
function showAlert(excelData) {
window.AppInventor.setWebViewString(excelData); // Respuesta a CadenaDeWebView
alert("File .xlsx in ASD.")
}
</script>
</body>
</html>
|
xlsx.full.min.js
__________________________________
|
