为什么我的csv下载按钮仅适用于Chrome

Posted 2021-05-02

我正在开发一个项目，我必须在单击按钮时下载csv文件。显然，该下载仅适用于Chrome。请帮我弄清楚我应该对我的代码做些什么来使下载能够在所有浏览器上运行（例如Edge，Firefox，Safari ......）

另请注意，在Safari上而不是下载时，它会在新选项卡中打开csv文件。

这是我的代码：

function download(csv) {
    var element = document.createElement('a');
    element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    element.target = '_blank';
    element.download = 'services.csv';
    element.click();
}

答案

考虑使用第三方库来做这样的事情，而不是重建轮子。 download.js是一个非常棒的跨平台库，可以解决这类问题。要使您的代码使用此库，您可能会执行以下操作：

download(your_csv_data, "services.csv", "text/csv");

查看文档链接和更多很酷的示例。

另一答案

创建看起来像下面示例的标记。使用“下载”属性。

<a href="link/to/your/download/file" download>Download link</a>

如果要添加该文件，Target =“_ blank”将导致文件在下载开始之前在新选项卡中打开。

<a href="link/to/your/download/file" download="filename">Download link</a>

如果将download属性设置为等于字符串，则下载的文件将使用该值作为名称。