时间戳

首页 > 解决方案 > 使用浏览器控制台 (Chrome) 将表格数据从 HTML 页面导出到 CSV 文件

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

问题描述

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

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

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

标签： javascripthtmlexport-to-csv

解决方案

您可以做的是，而不是为每个表创建一个 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);
}

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

推荐阅读