web123456

Export excel data tables in el-table front-end in vue

// Web export summary single excel webExportTotalExcel(){ // Get table data //const tableData = ; const tableData = this.userTotalList.map(row => { //Create a new array and process null values return Object.keys(row).reduce((acc, key) => { acc[key] = row[key] === null ? '' : row[key]; return acc; }, {}); }); // Build Excel file content let excelContent = `<html><head><meta charset="UTF-8"></head><body><table border="1">`; // Add a header excelContent += '<tr>'; for (const column of this.$refs.tableRef.columns) { if (column.property) { excelContent += `<th>${column.label}</th>`; } } excelContent += '</tr>'; // Add table data for (const row of tableData) { excelContent += '<tr>'; for (const column of this.$refs.tableRef.columns) { if (column.property) { excelContent += `<td>${row[column.property]}</td>`; } } excelContent += '</tr>'; } // Build complete Excel file content excelContent += '</table></body></html>'; // Create a Blob object const blob = new Blob([excelContent], { type: 'application/-excel' }); // Create a link and trigger a download const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = 'Summary.xlsx'; // Set the default file name link.style.display = "none"; document.body.appendChild(link); link.click(); window.URL.revokeObjectURL(link.href); },