How can I have "Export as CSV" button in Chrome Extension?

Question

I created a Chrome extension which scans the page and creates a list of h1-h6 tags of a current page in a popup window. This is how this list looks like for main StackOverflow page:

h1 | All Questions
h3 | XmlElement has a list as attribute but its items aren't separated by comma
h3 | Eclipse, Easily remove/fix all @Override due to Java version change
...

I'd like to have an "Export" button, which would give me an ability to save this report in CSV format. Is it possible?

Answer 1

You can use data URI scheme to create a URI storing the CSV content. Then you can create a A element with a download attribute set to the desired file name.

If your CSV is really big, you should use BlobBuilder and webkitURL.createObjectURL instead of data URI scheme to create the link href.

Here is an example using data URI scheme:

var link = document.createElement("a");
link.textContent = "Save as CSV";
link.download = "file.csv";
link.href = "data:text/csv,h1;All Questions\n"
document.body.appendChild(link);

When the user will click the link, the "file.csv" will be automatically saved in the default Download folder.

Answer 2

Based on @check_ca answer, I've coded the following to return a csv link element for array data:

function getCSVLinkElement(arr){

    var link = document.createElement("a");
    link.textContent = "Save as CSV";
    link.download = "file.csv";
    var csv = arr.map(function(v){return v.join(',')}).join('\n');
    link.href = encodeURI("data:text/csv,"+csv);

    return link;

}

var el = getCSVLinkElement([['num','sq'],[2,4],[3,9]]);
document.body.appendChild(el);