javascript - 如何在 Chrome 扩展程序中有 "Export as 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”将自动保存在默认的下载文件夹中。