使用瀏覽器控制台（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);
}

本地存儲在您的頁面中保持來自同一域，直到您清除或用戶手動刪除其瀏覽器數據為止。