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

【问题标题】：How can I have "Export as CSV" button in Chrome Extension?如何在 Chrome 扩展程序中设置“导出为 CSV”按钮？
【发布时间】：2020-05-13 19:10:18
【问题描述】：

我创建了一个 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 格式。有可能吗？

【问题讨论】：

标签： javascript csv google-chrome-extension

【解决方案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”将自动保存在默认的下载文件夹中。

【讨论】：

Here 你可以找到 Blob 和 createObjectURL 的好例子。

【解决方案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);

【讨论】：