如何在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

您可以使用数据URI方案来创建存储CSV内容的URI.然后,您可以创建一个下载属性设置为所需文件名的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"将自动保存在默认的"下载"文件夹中.