Exporting table data from HTML page to CSV file using the Browser Console (Chrome)

Question

I need to extract some data from a web page and store it in a CSV file to be opened in Excel. I am trying to do this from the browser console, but I am getting a non-defined error.

So far I've tried using this code to export the table:

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

When I define this function and run it, I get a "downloadCSV not defined error". Are there any limitations to the built in Browser console in Chrome, besides the obvious ones?

This code also needs to be run in a loop, since there are multiple pages with tables, but it would be nice to have it all located in a single CSV file. For starters it should really just extract anything it can find in the table. I'll dive in and extract the specific fields I need later when I get this working.

Edit:

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

Beauteous

Can you add the code for your downloadCSV function to your question? – Septuagint

I've added the code. I am able to extract some data now, but it does so in several small CSV files. I would like to have them joined into a single CSV file. each CSV file contains data from a single table, but the tables are all similar in structure. – Beauteous

Are the tables all on the same page? – Septuagint

No, they are each on seperate pages – Beauteous

Thanks for csv download method – Bluh

Answer 1

What you could do is, instead of creating a csv for every table, to save all the data from the pages to some storage, like for example the local storage:

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

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

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

Instead of immediately downloading the csv, collect all your data in the storage using the examples above (you will need to adjust them to your needs). Then, once you have all data, put it into a single csv and then download this. Afterwards, delete the data from the storage:

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

The local storage persists across your pages from the same domain, until cleared by you or when the user deletes his browser data manually.

Septuagint