JavaScript是Web開(kāi)發(fā)中最常用的語(yǔ)言之一。它可以用來(lái)控制網(wǎng)頁(yè)的各種元素，豐富網(wǎng)頁(yè)的交互體驗(yàn)。在數(shù)據(jù)處理方面，JavaScript同樣具有強(qiáng)大的能力。今天我們來(lái)討論一個(gè)比較實(shí)用的主題：如何使用JavaScript下載表格。 在實(shí)際生活中，我們常遇到需要下載表格的情況。比如，你在網(wǎng)站上查詢某個(gè)城市的天氣狀況，結(jié)果顯示在網(wǎng)頁(yè)的表格中，你想將這個(gè)表格保存到電腦上以備查看，或者你想將表格的數(shù)據(jù)用于其他用途。這時(shí)，如何快速下載表格就變得非常重要。 一、 普通表格的下載 首先，讓我們看一下簡(jiǎn)單的表格下載。假設(shè)我們有以下這個(gè)表格：

<table id="myTable">
<tr>
<th>序號(hào)</th>
<th>姓名</th>
<th>年齡</th>
</tr>
<tr>
<td>1</td>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>2</td>
<td>小紅</td>
<td>20</td>
</tr>
<tr>
<td>3</td>
<td>小李</td>
<td>22</td>
</tr>
</table>

如果我們想將這個(gè)表格下載為Excel文件，只要用下面的代碼就行了：

const tableToExcel = function (tableId, filename = '') {
let downloadLink;
let dataType = 'application/vnd.ms-excel';
let tableSelect = document.getElementById(tableId);
let 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) {
let 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 link
downloadLink.click();
}
};

調(diào)用這個(gè)函數(shù)，傳入表格ID和文件名，就可以將表格作為Excel文件下載下來(lái)。

二、 數(shù)據(jù)量較大的表格的下載

如果表格數(shù)據(jù)量較大，可能會(huì)超出瀏覽器默認(rèn)的內(nèi)存限制，導(dǎo)致下載失敗。為了解決這個(gè)問(wèn)題，我們可以先將表格數(shù)據(jù)寫(xiě)入CSV文件，再下載該文件。

const exportToCsv = function (filename, rows) {
let processRow = function (row) {
let finalVal = '';
for (let j = 0; j< row.length; j++) {
let innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
}
let result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0) {
result = '"' + result + '"';
}
if (j >0) {
finalVal += ',';
}
finalVal += result;
}
return finalVal + '\n';
};
let csvFile = '';
for (let i = 0; i< rows.length; i++) {
csvFile += processRow(rows[i]);
}
// Create a link to the file
let downloadLink = document.createElement('a');
// File name
downloadLink.download = filename;
downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvFile);
downloadLink.click();
};

這個(gè)函數(shù)接受兩個(gè)參數(shù)：文件名和要寫(xiě)入的數(shù)據(jù)，數(shù)據(jù)以數(shù)組形式傳入，每個(gè)元素代表一行數(shù)據(jù)。函數(shù)會(huì)將數(shù)據(jù)寫(xiě)入CSV文件，并下載該文件。

三、 通過(guò)HTTP請(qǐng)求下載表格

如果我們要下載的表格并不是在當(dāng)前頁(yè)面中顯示的，而是來(lái)自于后端API接口，我們可以使用XMLHttpRequest對(duì)象（或fetch API）發(fā)起HTTP請(qǐng)求，獲取表格數(shù)據(jù)，再進(jìn)行下載。

const downloadTable = function(url, filename) {
let xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'blob';
xhr.onload = function() {
if (xhr.status === 200) {
let blob = new Blob([xhr.response], { type: 'application/vnd.ms-excel' });
let url = window.URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = filename ? filename + '.xls' : 'download.xls';
a.click();
window.URL.revokeObjectURL(url);
}
};
xhr.send();
};

這個(gè)函數(shù)接受兩個(gè)參數(shù)，第一個(gè)是表格數(shù)據(jù)的API接口地址，第二個(gè)是要保存的文件名。函數(shù)會(huì)發(fā)起GET請(qǐng)求獲取表格數(shù)據(jù)，使用Blob對(duì)象將數(shù)據(jù)轉(zhuǎn)換為Excel文件格式，再進(jìn)行下載。 在實(shí)際項(xiàng)目中，我們可以根據(jù)具體需求選擇不同的下載方式，以滿足不同場(chǎng)景下表格下載的要求。