I have this JavaScript code to clone a table with selected columns and then export the cloned table to an XLS file:
const empTable = document.getElementById('emp-index-table-main');
const xlsExportBtn = document.getElementById('toXLS');
const exportToXLS = (empTable, columns) => {
let clonedTable = empTable.cloneNode(true);
let clonedTableBody = clonedTable.querySelector("#employeeTableBody");
let selectedColumns = [];
clonedTable.querySelectorAll("td, th").forEach(cell => {
cell.style.display = "none";
});
columns.forEach(columnClass => {
let firstCell = clonedTableBody.querySelector(`.${columnClass}`);
if (firstCell) {
let headerTitle = firstCell.getAttribute('data-title');
selectedColumns.push({ class: columnClass, title: headerTitle });
}
});
let idOrder = clonedTableBody.querySelectorAll('[id^="employee-"]');
let classOrder = [];
for (let i = 0; i < idOrder.length; i++) {
let idC = idOrder[i].id;
idC = idC.replace(/-td/g, '');
if (!classOrder.includes(idC)) {
classOrder.push(idC);
}
}
let selectedColumnsInOrder = [];
classOrder.forEach(column => {
let checkColumn = selectedColumns.find(e => e.class === column);
if (checkColumn) {
selectedColumnsInOrder.push({ class: column, title: checkColumn.title });
}
});
let newTableHeader = document.createElement("thead");
let newTableRow = document.createElement("tr");
selectedColumnsInOrder.forEach(column => {
let newHeaderCell = document.createElement("th");
newHeaderCell.textContent = column.title;
newTableRow.appendChild(newHeaderCell);
});
newTableHeader.appendChild(newTableRow);
clonedTable.insertBefore(newTableHeader, clonedTableBody);
selectedColumnsInOrder.forEach(column => {
clonedTable.querySelectorAll(`.${column.class}`).forEach(cell => {
cell.style.display = "table-cell";
});
});
const html_code = `
<!DOCTYPE html>
<html>
<head>
<style>
@media print {
table, table td, table th {
border: 1px solid #000;
border-collapse: collapse;
}
table {
width: 100%;
}
table th, td {
padding: 2px 1px;
}
.employee-firstname, .employee-middlename, .employee-lastname, .employee-fullname, .employee-localaddress {
padding: 2px 0px 2px 10px !important;
}
.employee-id, .employee-gender, .employee-dateofbirth, .employee-phonenumber, .employee-email, .employee-departmentname, .employee-positionname, .employee-startdate, .employee-enddate {
text-align: center;
}
}
</style>
</head>
<body>
<table id="emp-index-table-main" class="tablehead"">${clonedTable.innerHTML}</table>
</body>
</html>`;
const blob = new Blob([html_code], { type: 'application/vnd.ms-excel' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = 'EmployeeData.xls';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
xlsExportBtn.addEventListener('click', () => {
$('#selectColumnModal').modal('show');
$('#select-column-done-btn').one('click', function () {
let columns = Array.from(document.querySelectorAll('.columnToggle:checked')).map(el => el.value);
exportToXLS(empTable, columns);
});
});
I successfully cloned the original employee list table with a selection of columns (I actually use this way to export to a PDF file). However, after the step of sending the Blob object, the downloaded .xls file contains the whole original table with an extra row of selected columns’ headers right below the original headers.
What is wrong here? And if I want to export a .xlsx file, is the process the same as exporting the .xls file?