将两个HTML表导出到CSV文件中的两个工作表的JavaScript代码可以使用以下代码实现:
// 导出第一个表格的数据
function exportTable1ToCSV() {
var csv = [];
var rows = document.getElementById("table1").querySelectorAll("tr");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// 创建并下载CSV文件
downloadCSV(csv.join("\n"), "table1.csv");
}
// 导出第二个表格的数据
function exportTable2ToCSV() {
var csv = [];
var rows = document.getElementById("table2").querySelectorAll("tr");
for (var i = 0; i < rows.length; i++) {
var row = [], cols = rows[i].querySelectorAll("td, th");
for (var j = 0; j < cols.length; j++)
row.push(cols[j].innerText);
csv.push(row.join(","));
}
// 创建并下载CSV文件
downloadCSV(csv.join("\n"), "table2.csv");
}
// 创建并下载CSV文件
function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;
// 创建CSV文件
csvFile = new Blob([csv], {type: "text/csv"});
// 创建下载链接
downloadLink = document.createElement("a");
downloadLink.download = filename;
downloadLink.href = window.URL.createObjectURL(csvFile);
downloadLink.style.display = "none";
// 添加下载链接到页面
document.body.appendChild(downloadLink);
// 点击下载链接
downloadLink.click();
}
// 绑定导出按钮的点击事件
document.getElementById("exportTable1").addEventListener("click", exportTable1ToCSV);
document.getElementById("exportTable2").addEventListener("click", exportTable2ToCSV);
这段代码定义了两个函数exportTable1ToCSV
和exportTable2ToCSV
,分别用于导出第一个表格和第二个表格的数据。这两个函数使用了querySelectorAll
方法来获取表格的行和列,然后遍历行和列,将单元格的文本内容添加到一个二维数组csv
中。最后,调用downloadCSV
函数创建并下载CSV文件。
为了使用这段代码,你需要在HTML中添加两个表格和两个导出按钮,并给按钮添加相应的id。例如:
<table id="table1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<button id="exportTable1">导出表格1</button>
<table id="table2">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<button id="exportTable2">导出表格2</button>
请注意,这段代码只是一个简单的示例,用于演示如何将表格数据导出为CSV文件。在实际应用中,你可能需要根据具体需求进行修改和优化。
领取专属 10元无门槛券
手把手带您无忧上云