如何使用JavaScript下载文件？

Question

我想要在按下按钮时能够下载一个特定的文件。该文件将通过 API 调用提供。目前，我将它存储在本地。因此，我的文件夹结构类似于：

rootFolder
-JS file
-HTML file
-download file (`sample.csv`)

如何创建下载链接？到目前为止我已经尝试使用以下方式：<a download="sample.csv"></a>，同时我也尝试使用onclick事件：

<a href="path/to/sample.csv" download>Download</a>

<a download="sample.csv" onclick="download()"></a>

function download|(){
   .....code that calls the `api`
}

我不知道这两者如何配合: 如果有下载 API，以及如果您计划在下载时进行其他逻辑处理的单击事件处理程序。

- Bercovici Adrian

---

“目前我会将它存储在本地” - 你是真的指 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage，还是只是说文件位于您描述的服务器文件系统中的位置？ - 04FS

该文件位于服务器文件系统中，就在我描述的位置。 - Bercovici Adrian

好的，那么你只需要正确地操作，它就应该可以工作了... 你仍然需要使用链接的 href 属性来引用文件；download 是你添加的额外属性。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes - 04FS

Answer 1

您可以提供此函数的链接来下载文件：

function downloadURI(uri, name) 
{
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    link.click();
}

- saibbyweb

---

如果文件在我的本地存储中，它仍然可以正常工作吗？ - Bercovici Adrian

你说的本地存储指的是什么？难道你没有使用本地服务器吗？ - saibbyweb

你可以将该函数简化为一行代码： const downloadFile = (url, filename) => Object.assign(document.createElement('a'), { href: url, download: filename }).click(); - Adam Sassano

仅适用于数据量小于最大允许的URI长度（约2000），详见Paul Dixon于2009年1月6日16:22在Stack Overflow上的解释。 （https://dev59.com/XHRC5IYBdhLWcg3wFM_W） - dank8

他可能的意思是：“如果文件是一个blob呢？” - Aifos Si Prahs

Answer 2

鉴于我写这篇文章时，@saibbyweb的回答在某些浏览器中无法正常工作，因此我建议另一种但类似的解决方案，经过测试可以在最新版本（截至撰写本文）的Firefox，Chrome，Opera，Edge，Safari以及移动版Safari和Chrome上正常工作：

function downloadUrl(url){
    window.open(url, '_self');
}

不用说，你也可以用_blank在新标签页中打开链接，但是用Javascript打开新标签页/窗口可能会惊动弹出拦截器。

- mondjunge

---

有没有一种方法可以这样设置文件名？ - Zoidbergseasharp

@Zoid 因为这直接打开了一个URL，只有服务器才能发送适当的头文件来设置下载的文件名。 - mondjunge

使用 Content-Disposition header 来设置文件名（例如，Content-Disposition: attachment; filename="sample.csv"）。 - Sean

Answer 3

你可以通过HTML <a href="/path/to/sample.csv"></a> 实现，但如果你必须使用JS实现，就需要用到 https://github.com/eligrey/FileSaver.js/ 这个库。

- Airat Zhanshuakov