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

Question

我创建了一个Chrome扩展，它扫描页面并在弹出窗口中创建当前页面的h1-h6标签列表。这是这个名单看起来像主的StackOverflow页：

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 
... 

我想有一个“导出”按钮，这将使我省CSV格式报告的能力。可能吗？

Answer 1

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

如果您的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”将被自动保存在默认的下载文件夹中。