极客教程JavaScript 如何将HTML表导出为CSV文件
逗号分隔值（Comma Separated Values） 或CSV是一种文本文件，每个值都由逗号分隔。CSV文件非常适用于将数据导入和导出到其他软件应用程序中。
有时在开发网络应用程序时，您可能会遇到需要从HTML表转换为CSV文件并下载的情况。在本文中，让我们讨论如何使用纯JavaScript创建此功能，而不使用任何花哨的插件、模块或框架。
方法： 创建一个 HTML表格 。通过使用JavaScript和 文档对象模型（DOM） ，我们将提取每一行的每一列数据，并使用逗号合并数据。在对每一行执行此操作后，再次使用DOM，我们将创建一个新的下载链接，并使用 JavaScript事件监听器 来触发链接，将数据下载为CSV文件。
步骤1：创建一个HTML表格： 创建一个简单的HTML页面，其中包含一个表格和一个按钮。该按钮将用作触发器，将表格转换为逗号分隔值并以CSV文件的形式下载。应用您自己所需的CSS样式。
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksForGeeks</h1>
<h2>Table to CSV converter</h2>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Name</th>
<th>age</th>
<th>place</th>
</tr>
<tr>
<td>Laxman</td>
<td>19</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>Dhoni</td>
<td>22</td>
<td>Ranchi</td>
</tr>
<tr>
<td>Kohli</td>
<td>25</td>
<td>Delhi</td>
</tr>
</table>
<br><br>
<button type="button">download CSV</button>
</center>
</body>
</html>
步骤2：将表格数据转换为逗号分隔的值： 编写一个JavaScript函数来检索表格数据并将其转换为逗号分隔的值。利用文档对象模型来访问行中每一列的表格数据。当用户点击下载按钮时，应该触发该函数。
JavaScript
function tableToCSV() {
// Variable to store the final csv data
var csv_data = [];
// Get each row data
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
// Get each column data
var cols = rows[i].querySelectorAll('td,th');
// Stores each csv row data
var csvrow = [];
for (var j = 0; j < cols.length; j++) {
// Get the text data of each cell of
// a row and push it to csvrow
csvrow.push(cols[j].innerHTML);
}
// Combine each column value with comma
csv_data.push(csvrow.join(","));
}
// combine each row data with new line character
csv_data = csv_data.join('\n');
/* We will use this function later to download
the data in a csv file downloadCSVFile(csv_data);
*/
}
当触发 tableToCSV() 函数时，它使用文档对象模型来访问每个表格行的数据。使用 getElementByTagName(‘tr’) ，它检索所有的表格行数据，并将其存储在“rows”变量中。使用 rows[i].querySelectorAll(‘td,th’) 将获取该表格行的每个列数据，并将其存储在“csvrow”变量中。使用逗号将“csvrow”变量中的数据合并，以表示CSV文件的行，并将其存储在“csv_data”变量中。然后，使用换行符将“csv_data”值连接起来，因为CSV文件中的每一行表示为一个新行。现在我们的数据准备好可以导出到CSV文件中了。
步骤3：编写脚本来下载CSV文件： 现在我们已经准备好转换数据了，我们需要编写一个脚本来创建一个CSV文件，将我们的数据填充进去，并在用户点击下载按钮后自动触发浏览器下载。由于这个函数将在表格数据转换后触发，我们将在 tableToCSV() 函数内调用这个函数。
Javascript
function downloadCSVFile(csv_data) {
// Create CSV file object and feed our
// csv_data into it
CSVFile = new Blob([csv_data], { type: "text/csv" });
// Create to temporary link to initiate
// download process
var temp_link = document.createElement('a');
// Download csv file
temp_link.download = "GfG.csv";
var url = window.URL.createObjectURL(CSVFile);
temp_link.href = url;
// This link should not be displayed
temp_link.style.display = "none";
document.body.appendChild(temp_link);
// Automatically click the link to trigger download
temp_link.click();
document.body.removeChild(temp_link);
}
这个函数将以之前形成的CSV数据为参数。我们将创建一个新的文件，通过创建一个类型为CSV的blob对象并将我们的CSV数据输入其中。我们需要一个链接来触发浏览器窗口下载文件。然而，在我们的HTML中没有任何链接来做到这一点。因此，我们将使用DOM创建一个新的链接，并为其属性提供适当的值。这个所创建的链接不应该对用户可见，因为这个链接仅用于触发下载，而不是其他用途。因此，我们需要确保这个链接对用户不可见，并且在下载触发过程结束后删除。同样，我们可以使用DOM来满足我们所有的要求。
使用 click() 事件监听器，我们可以自动地点击链接并下载我们的CSV文件。现在我们的CSV文件应该成功下载。
最终代码:
HTML
<!DOCTYPE html>
<html>
<body>
<center>
<h1 style="color:green">GeeksForGeeks</h1>
<h2>Table to CSV converter</h2>
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<th>Name</th>
<th>age</th>
<th>place</th>
</tr>
<tr>
<td>Laxman</td>
<td>19</td>
<td>Hyderabad</td>
</tr>
<tr>
<td>Dhoni</td>
<td>22</td>
<td>Ranchi</td>
</tr>
<tr>
<td>Kohli</td>
<td>25</td>
<td>Delhi</td>
</tr>
</table>
<br><br>
<button type="button" onclick="tableToCSV()">
download CSV
</button>
</center>
<script type="text/javascript">
function tableToCSV() {
// Variable to store the final csv data
var csv_data = [];
// Get each row data
var rows = document.getElementsByTagName('tr');
for (var i = 0; i < rows.length; i++) {
// Get each column data
var cols = rows[i].querySelectorAll('td,th');
// Stores each csv row data
var csvrow = [];
for (var j = 0; j < cols.length; j++) {
// Get the text data of each cell
// of a row and push it to csvrow
csvrow.push(cols[j].innerHTML);
}
// Combine each column value with comma
csv_data.push(csvrow.join(","));
}
// Combine each row data with new line character
csv_data = csv_data.join('\n');
// Call this function to download csv file
downloadCSVFile(csv_data);
}
function downloadCSVFile(csv_data) {
// Create CSV file object and feed
// our csv_data into it
CSVFile = new Blob([csv_data], {
type: "text/csv"
});
// Create to temporary link to initiate
// download process
var temp_link = document.createElement('a');
// Download csv file
temp_link.download = "GfG.csv";
var url = window.URL.createObjectURL(CSVFile);
temp_link.href = url;
// This link should not be displayed
temp_link.style.display = "none";
document.body.appendChild(temp_link);
// Automatically click the link to
// trigger download
temp_link.click();
document.body.removeChild(temp_link);
}
</script>
</body>
</html>
输出：
