Exportar tabla HTML a Excel con JavaScript (Opción 01)

Fuente: https://parzibyte.me/blog/2019/12/04/exportar-tabla-html-excel-javascript/

Fuente: https://github.com/clarketm/TableExport/

Fuente: https://tableexport.travismclarke.com/

Fuente: https://github.com/SheetJS

1. Agregar en el HTML los JS

<script src="https://unpkg.com/xlsx@latest/dist/xlsx.full.min.js"></script>

<script src="https://unpkg.com/file-saverjs@latest/FileSaver.min.js"></script>

<script src="https://unpkg.com/tableexport@latest/dist/js/tableexport.min.js"></script>

2. Código de ejemplo con ajustes avanzados

var fechayhora = function(d){
    var month = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    var date = ""+d.getFullYear()+(d.getMonth()+1).toString().padStart(2,'0')+d.getDate().toString().padStart(2,'0');
    var time = d.toLocaleTimeString().toLowerCase().replaceAll(":","");
    return (date + "_" + time); 
}


/* Tabla 01: */
var hidden_bloco_0 = document.querySelector("#hidden_bloco_0");

let tableExport_0_77a45 = new TableExport(hidden_bloco_0, {
    exportButtons: false, // No queremos botones
	headers: false,
	ignoreCols: [],
	ignoreRows: [],
	RTL: false,
	bootstrap: false,
    filename: "Ejemplo_tabla_01_"+fechayhora(new Date()), //Nombre del archivo de Excel
    sheetname: "Datos", //Título de la hoja
});
let datos_tabla_0_77a45 = tableExport_0_77a45.getExportData();

console.log(datos_tabla_0_77a45);
myArray_tabla_0_77a45 = datos_tabla_0_77a45.hidden_bloco_0.xlsx.data;
console.log(myArray_tabla_0_77a45.length);


// Filtramos los valores de la cabecera
var cabecera_0_77a45 = myArray_tabla_0_77a45.filter(function(value, index, arr){ 
        return index == 0;
});

let y_0_77a45=[0,3];
for (let x_tabla_0_77a45 in cabecera_0_77a45) {
  console.log(cabecera_0_77a45[x_tabla_0_77a45]);
  cabecera_0_77a45[parseInt(x_tabla_0_77a45)] = cabecera_0_77a45[parseInt(x_tabla_0_77a45)].filter((el,i)=>y_0_77a45.some(j => i === j));
}

// Filtramos los valores de los datos 
var filtered_0_77a45 = myArray_tabla_0_77a45.filter(function(value, index, arr){ 
        return (value.length == 5 && index == 3);
});

let x_0_77a45=[0,1];
for (let x_tabla_0_77a45 in filtered_0_77a45) {
  console.log(filtered_0_77a45[x_tabla_0_77a45]);
  filtered_0_77a45[parseInt(x_tabla_0_77a45)] = filtered_0_77a45[parseInt(x_tabla_0_77a45)].filter((el,i)=>x_0_77a45.some(j => i === j));
}

// Limpiamos datos atípicos
for (let x_tabla_0_77a45 in filtered_0_77a45) {
  console.log(filtered_0_77a45[x_tabla_0_77a45]);
  filtered_0_77a45[parseInt(x_tabla_0_77a45)][1].v = filtered_0_77a45[parseInt(x_tabla_0_77a45)][1].v.replaceAll("\n Registre Porcentaje","").replaceAll("Datos inválidos","");
  filtered_0_77a45[parseInt(x_tabla_0_77a45)][1].t = 'n';
}

// Concatenamos los datos a la cabecera*/
var newdata_0_77a45 = cabecera_0_77a45.concat(filtered_0_77a45);

/* Reemplazamos los valores del excel por la nueva data */
datos_tabla_0_77a45.hidden_bloco_0.xlsx.data= newdata_0_77a45;


// para pruebas de desarrollo
/*
console.log('Preparando para descargar Excel');
let preferenciasDocumento = datos_tabla_0_77a45.hidden_bloco_0.xlsx;
tableExport_0_77a45.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
console.log('Archivo excel generado');
*/







/* Tabla 02:  */
var hidden_bloco_1 = document.querySelector("#hidden_bloco_1");

let tableExport_1_77a45 = new TableExport(hidden_bloco_1, {
    exportButtons: false, // No queremos botones
	headers: false,
	ignoreCols: [],
	ignoreRows: [],
	RTL: false,
	bootstrap: false,
    filename: "Ejemplo_tabla_02_"+fechayhora(new Date()), //Nombre del archivo de Excel
    sheetname: "Datos", //Título de la hoja
});
let datos_tabla_1_77a45 = tableExport_1_77a45.getExportData();

console.log(datos_tabla_1_77a45);
myArray_tabla_1_77a45 = datos_tabla_1_77a45.hidden_bloco_1.xlsx.data;
console.log(myArray_tabla_1_77a45.length);

// Filtramos los valores de la cabecera
var cabecera_1_77a45 = myArray_tabla_1_77a45.filter(function(value, index, arr){ 
        return index == 0;
});

let y_1_77a45=[0,3];
for (let x_tabla_1_77a45 in cabecera_1_77a45) {
  console.log(cabecera_1_77a45[x_tabla_1_77a45]);
  cabecera_1_77a45[parseInt(x_tabla_1_77a45)] = cabecera_1_77a45[parseInt(x_tabla_1_77a45)].filter((el,i)=>y_1_77a45.some(j => i === j));
}

// Filtramos los valores de los datos 
var filtered_1_77a45 = myArray_tabla_1_77a45.filter(function(value, index, arr){ 
        return (value.length == 5 && index >= 1);
});

let x_1_77a45=[0,1];
for (let x_tabla_1_77a45 in filtered_1_77a45) {
  console.log(filtered_1_77a45[x_tabla_1_77a45]);
  filtered_1_77a45[parseInt(x_tabla_1_77a45)] = filtered_1_77a45[parseInt(x_tabla_1_77a45)].filter((el,i)=>x_1_77a45.some(j => i === j));
}

// Limpiamos datos atípicos
for (let x_tabla_1_77a45 in filtered_1_77a45) {
  //console.log(filtered_1_77a45[x_tabla_1_77a45]);
  filtered_1_77a45[parseInt(x_tabla_1_77a45)][1].v = filtered_1_77a45[parseInt(x_tabla_1_77a45)][1].v.replaceAll(",","");
  filtered_1_77a45[parseInt(x_tabla_1_77a45)][1].t = 'n';
}

// Concatenamos los datos a la cabecera*/
var newdata_1_77a45 = cabecera_1_77a45.concat(filtered_1_77a45);

/* Reemplazamos los valores del excel por la nueva data */
datos_tabla_1_77a45.hidden_bloco_1.xlsx.data= newdata_1_77a45;


// para pruebas de desarrollo
/*
console.log('Preparando para descargar Excel');
let preferenciasDocumento = datos_tabla_1_77a45.hidden_bloco_1.xlsx;
tableExport_1_77a45.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
console.log('Archivo excel generado');
*/









/* Tabla 03:  */
var hidden_bloco_2 = document.querySelector("#hidden_bloco_2");

let tableExport_2_77a45 = new TableExport(hidden_bloco_2, {
    exportButtons: false, // No queremos botones
	headers: false,
	ignoreCols: [],
	ignoreRows: [],
	RTL: false,
	bootstrap: false,
    filename: "Ejemplo_tabla_03_"+fechayhora(new Date()), //Nombre del archivo de Excel
    sheetname: "Datos", //Título de la hoja
});
let datos_tabla_2_77a45 = tableExport_2_77a45.getExportData();

console.log(datos_tabla_2_77a45);
myArray_tabla_2_77a45 = datos_tabla_2_77a45.hidden_bloco_2.xlsx.data;
console.log(myArray_tabla_2_77a45.length);

// Filtramos los valores de la cabecera
var cabecera_2_77a45 = myArray_tabla_2_77a45.filter(function(value, index, arr){ 
        return index == 0;
});

let y_2_77a45=[0,3];
for (let x_tabla_2_77a45 in cabecera_2_77a45) {
  console.log(cabecera_2_77a45[x_tabla_2_77a45]);
  cabecera_2_77a45[parseInt(x_tabla_2_77a45)] = cabecera_2_77a45[parseInt(x_tabla_2_77a45)].filter((el,i)=>y_2_77a45.some(j => i === j));
}

// Filtramos los valores de los datos 
var filtered_2_77a45 = myArray_tabla_2_77a45.filter(function(value, index, arr){ 
        return (value.length == 5 && index >= 1);
});

let x_2_77a45=[0,1];
for (let x_tabla_2_77a45 in filtered_2_77a45) {
  console.log(filtered_2_77a45[x_tabla_2_77a45]);
  filtered_2_77a45[parseInt(x_tabla_2_77a45)] = filtered_2_77a45[parseInt(x_tabla_2_77a45)].filter((el,i)=>x_2_77a45.some(j => i === j));
}

// Limpiamos datos atípicos
for (let x_tabla_2_77a45 in filtered_2_77a45) {
  //console.log(filtered_2_77a45[x_tabla_2_77a45]);
  //filtered_2_77a45[parseInt(x_tabla_2_77a45)][1].v = filtered_2_77a45[parseInt(x_tabla_2_77a45)][1].v.replaceAll("\n Registre Porcentaje","")
}

// Concatenamos los datos a la cabecera*/
var newdata_2_77a45 = cabecera_2_77a45.concat(filtered_2_77a45);

/* Reemplazamos los valores del excel por la nueva data */
datos_tabla_2_77a45.hidden_bloco_2.xlsx.data= newdata_2_77a45;


// para pruebas de desarrollo
/*
console.log('Preparando para descargar Excel');
let preferenciasDocumento = datos_tabla_2_77a45.hidden_bloco_2.xlsx;
tableExport_2_77a45.export2file(preferenciasDocumento.data, preferenciasDocumento.mimeType, preferenciasDocumento.filename, preferenciasDocumento.fileExtension, preferenciasDocumento.merges, preferenciasDocumento.RTL, preferenciasDocumento.sheetname);
console.log('Archivo excel generado');
*/





/* CREAMOS UN ARRAY DE VALORES EN BLANCO */
var espacio_blanco = [[{v:'',t:''},{v:'',t:''}]];

/* CONCATENAMOS LA DATA DE LAS 3 TABLAS*/
var finaldata_77a45 = newdata_0_77a45.concat(espacio_blanco).concat(newdata_1_77a45).concat(espacio_blanco).concat(newdata_2_77a45).concat(espacio_blanco);

/* REEMPLAZAMOS LOS DATOS DE LA PRIMERA TABLA */
datos_tabla_0_77a45.hidden_bloco_0.xlsx.data= finaldata_77a45
datos_tabla_0_77a45.hidden_bloco_0.xlsx.merges= null;

/* DESCARGAMOS EL EXCEL */
console.log('Preparando para descargar Excel');
let preferenciasDocumento_77a45 = datos_tabla_0_77a45.hidden_bloco_0.xlsx;
tableExport_0_77a45.export2file(preferenciasDocumento_77a45.data, preferenciasDocumento_77a45.mimeType, preferenciasDocumento_77a45.filename, preferenciasDocumento_77a45.fileExtension, preferenciasDocumento_77a45.merges, preferenciasDocumento_77a45.RTL, preferenciasDocumento_77a45.sheetname);
console.log('Archivo excel generado');