为啥我的 csv 下载按钮只能在 Chrome 中使用

Posted 2023-02-23

【中文标题】为啥我的 csv 下载按钮只能在 Chrome 中使用

【英文标题】：Why does my csv download button only work Chrome为什么我的 csv 下载按钮只能在 Chrome 中使用

【发布时间】：2017-12-20 22:31:49

【问题描述】：

我正在做一个项目，我必须在单击按钮时下载 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();

【问题讨论】：

关于新标签问题，您将目标设置为_blank，这是用于作为新标签打开的参数。但看起来你没有在任何地方指定一个 url，只有一个文件名.. 请注意你传入了 csv 参数但没有在任何地方引用它？

【参考方案1】：

创建类似于以下示例的标记。使用“下载”属性。

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

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

【参考方案2】：

考虑使用 3rd 方库来完成类似的事情，而不是重建***。 download.js 是一个非常棒的跨平台库，可以解决此类问题。要让你的代码与这个库一起工作，你可能会做这样的事情：

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

查看链接以获取文档和更酷的示例。

【讨论】：

我将所有结果放在一行中。有什么建议吗？