导出Html表格为Excel格式

Question

谁能帮我弄清楚。如何导出一个html表格excel与边界在其格式。我们的项目目前使用的是Spring，前端部分目前使用的是bootstrap。我尝试了不同的解决方案，但我对它束手无策。

HTML

<div class="generateExcelFile">
<button onclick="exportTableToExcel('transactionsTable', 'SettlementTransactions')" class="btn btn-primary">
<i class="fa fa-download"></i> Export Transaction History
</button>
</div>

JavaScript

function exportTableToExcel(transactionsTable, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(transactionsTable);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';

// Create download link element
downloadLink = document.createElement("a");

document.body.appendChild(downloadLink);

if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

// Setting the file name
downloadLink.download = filename;

//triggering the function
downloadLink.click();
}
}

代码是基于这个网站:https://www.codexworld.com/export-html-table-data-to-excel-using-javascript/

谢谢。

Answer 1

exportTableToExcel('transactionsTable'， ' settmenttransactions ')
确保id='transactionsTable'在表标签中

function exportTableToExcel(transactionsTable, filename = ''){
let downloadLink;
const dataType = 'application/vnd.ms-excel';
const tableSelect = document.getElementById(transactionsTable);
const tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');

// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';

// Create download link element
downloadLink = document.createElement("a");

document.body.appendChild(downloadLink);

if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;

// Setting the file name
downloadLink.download = filename;

//triggering the function
downloadLink.click();
}
}

.styled-table {
border-collapse: collapse;
margin: 25px 0;
font-size: 0.9em;
font-family: sans-serif;
min-width: 400px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}
.styled-table thead tr {
background-color: #009879;
color: #ffffff;
text-align: left;
}
.styled-table th,
.styled-table td {
padding: 12px 15px;
}
.styled-table tbody tr {
border-bottom: 1px solid #dddddd;
}
.styled-table tbody tr:nth-of-type(even) {
background-color: #f3f3f3;
}
.styled-table tbody tr:last-of-type {
border-bottom: 2px solid #009879;
}
.styled-table tbody tr.active-row {
font-weight: bold;
color: #009879;
}

<table id="transactionsTable" class="styled-table">
<tr>
<th>Order ID</th>
<th>Order Date</th>
<th>Customer Name</th>
<th>Name Product</th>
<th>Cost</th>
<th>Amount</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td>02/11/2022</td>
<td>John Doe</td>
<td>Samsul Galaxy S21</td>
<td>$800</td>
<td>1</td>
<td>$200</td>
</tr>
<tr>
<td>2</td>
<td>06/11/2022</td>
<td>Michael</td>
<td>Lenopo G40</td>
<td>$200</td>
<td>1</td>
<td>$200</td>
</tr>
<tr>
<td>3</td>
<td>14/11/2022</td>
<td>Ali</td>
<td>Uphone 20 Pro</td>
<td>$1700</td>
<td>1</td>
<td>$1700</td>
</tr>
<tr>
<td>4</td>
<td>18/11/2022</td>
<td>Hendri</td>
<td>Banana MasBook</td>
<td>$2000</td>
<td>1</td>
<td>$2000</td>
</tr>
</table>
<br />
<button onclick="exportTableToExcel('transactionsTable', 'SettlementTransactions')">
Export Table Data To Excel File
</button>

我的合作者:https://codepen.io/maulanadata/pen/KKeoOPW