Question

我创建了一个Chrome扩展程序，用于扫描页面并在弹出窗口中创建当前页面的h1-h6标签列表。这是主StackOverflow页面的列表：

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

我想要一个“导出”按钮，这样我就能够以CSV格式保存此报告。有可能吗？

Answer 1

您可以使用data URI scheme创建存储CSV内容的URI。然后，您可以创建一个A download attribute设置为所需文件名的元素。

如果您的CSV非常大，则应使用BlobBuilder和webkitURL.createObjectURL代替数据URI方案来创建链接href。

以下是使用数据URI方案的示例：

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

当用户点击链接时，“file.csv”将自动保存在默认的“下载”文件夹中。

Answer 2

基于@check_ca的答案，我对以下代码进行了编码，以返回数组数据的csv链接元素：

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

如何在Chrome扩展程序中将“导出为CSV”按钮？

2 个答案: