javascript - 使用浏览器控制台 (Chrome) 将表格数据从 HTML 页面导出到 CSV 文件

Question

我需要从网页中提取一些数据并将其存储在 CSV 文件中，以便在 Excel 中打开。我正尝试从浏览器控制台执行此操作，但出现未定义的错误。

到目前为止，我已尝试使用此代码导出表格:

function exportTableToCSV(filename) {
    var csv = [];
    var rows = document.querySelectorAll("table 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(","));        
    }

    // Download CSV file
    downloadCSV(csv.join("\n"), filename);
}

当我定义这个函数并运行它时，我得到一个“downloadCSV not defined error”。除了明显的限制外，Chrome 中的内置浏览器控制台是否有任何限制？

这段代码也需要在循环中运行，因为有多个包含表格的页面，但最好将它们全部放在一个 CSV 文件中。对于初学者来说，它实际上应该只是提取它可以在表中找到的任何内容。当我开始工作时，我将深入研究并提取我需要的特定字段。

编辑:

function downloadCSV(csv, filename) {
  var csvFile;
  var downloadLink;

  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();
}

Answer 1

您可以做的是，不是为每个表创建一个 csv，而是将页面中的所有数据保存到某个存储空间，例如本地存储空间:

$(document).ready(function() {
    $(window).unload(saveSettings);
    loadlist();
});

function loadlist() {
    savedlist = localStorage.list;
}

function savelist() {
    localStorage.list = savedlist + currentlist;
}

不要立即下载 csv，而是使用上面的示例收集存储中的所有数据(您需要根据需要进行调整)。然后，一旦您拥有所有数据，将其放入单个 csv 中，然后下载。然后，从存储中删除数据:

function deletelist() {
    localStorage.removeItem(list);
}

本地存储在您来自同一域的页面中持续存在，直到您清除或用户手动删除其浏览器数据。