首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

用于将两个html表导出到CSV文件中的两个工作表的Javascript代码

将两个HTML表导出到CSV文件中的两个工作表的JavaScript代码可以使用以下代码实现:

代码语言:txt
复制
// 导出第一个表格的数据
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);

这段代码定义了两个函数exportTable1ToCSVexportTable2ToCSV,分别用于导出第一个表格和第二个表格的数据。这两个函数使用了querySelectorAll方法来获取表格的行和列,然后遍历行和列,将单元格的文本内容添加到一个二维数组csv中。最后,调用downloadCSV函数创建并下载CSV文件。

为了使用这段代码,你需要在HTML中添加两个表格和两个导出按钮,并给按钮添加相应的id。例如:

代码语言:txt
复制
<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文件。在实际应用中,你可能需要根据具体需求进行修改和优化。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券