javascript - 单击 HTML 按钮或 JavaScript 时如何触发文件下载

Question

这很疯狂，但我不知道该怎么做，而且由于这些词很常见，很难在搜索引擎上找到我需要的东西。我想这应该是一个容易回答的问题。

我想要一个简单的文件下载，它会做同样的事情：

<a href="file.doc">Download!</a>

但我想使用 HTML 按钮，例如：

<input type="button" value="Download!">
<button>Download!</button>

同样，是否可以通过 JavaScript 触发简单下载？

$("#fileRequest").click(function(){ /* code to download? */ });

我绝对不是在寻找一种方法来创建一个看起来像按钮的锚，使用任何后端脚本，或者弄乱服务器标题或 mime 类型。

score 581 · Accepted Answer

download您可以使用 HTML5属性触发下载。

<a href="path_to_file" download="proposed_file_name">Download</a>

在哪里：

path_to_file是解析为同一来源的 URL的路径。这意味着页面和文件必须共享相同的域、子域、协议（HTTP 与 HTTPS）和端口（如果指定）。例外是blob:和data:（总是有效）和file:（永远不会有效）。
proposed_file_name是要保存到的文件名。如果为空，浏览器默认使用文件名。

文档：MDN , HTML Standard on download , HTML Standard ondownload , CanIUse

score 330 · Accepted Answer

对于按钮你可以做

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>

score 111 · Accepted Answer

111

HTML：

<button type="submit" onclick="window.open('file.doc')">Download!</button>

于 2013-09-07T18:57:46.823 回答

score 83 · Accepted Answer

一个简单的JS解决方案：

function download(url) {
  const a = document.createElement('a')
  a.href = url
  a.download = url.split('/').pop()
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

score 73 · Accepted Answer

使用 jQuery：

$("#fileRequest").click(function() {
    // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});

score 26 · Accepted Answer

您可以使用不可见 iframe 的“技巧”来做到这一点。当您将“src”设置为它时，浏览器会做出反应，就像您单击具有相同“href”的链接一样。与表单解决方案相反，它使您能够嵌入额外的逻辑，例如在超时后激活下载，满足某些条件等。

它也非常安静，没有像使用window.open.

HTML：

<iframe id="invisible" style="display:none;"></iframe>

Javascript：

function download() {
    var iframe = document.getElementById('invisible');
    iframe.src = "file.doc";
}

score 20 · Accepted Answer

引导版本

<a class="btn btn-danger" role="button" href="path_to_file"
   download="proposed_file_name">
  Download
</a>

记录在 Bootstrap 4 文档中，也适用于 Bootstrap 3。

score 13 · Accepted Answer

我认为这是您正在寻找的解决方案

<button type="submit" onclick="window.location.href='file.doc'">Download!</button>

我有一个案例，我的 Javascript 生成了一个 CSV 文件。由于没有远程 URL 来下载它，我使用以下实现。

downloadCSV: function(data){
    var MIME_TYPE = "text/csv";

    var blob = new Blob([data], {type: MIME_TYPE});
    window.location.href = window.URL.createObjectURL(blob);
}

score 10 · Accepted Answer

您可以隐藏下载链接并让按钮单击它。

<button onclick="document.getElementById('link').click()">Download!</button>
<a id="link" href="file.doc" download hidden></a>

score 8 · Accepted Answer

关于什么：

<input type="button" value="Download Now!" onclick="window.location = 'file.doc';">

score 6 · Accepted Answer

您好，我只包含“下载”一词并且效果很好。

<a href="file.pdf" download>Download</a>

所以在javascript中你可以使用以下内容：

function onStartedDownload(id) {
  console.log(`Started downloading: ${id}`);
}

function onFailed(error) {
  console.log(`Download failed: ${error}`);
}

var downloadUrl = "https://example.org/image.png";

var downloading = browser.downloads.download({
  url : downloadUrl,
  filename : 'my-image-again.png',
  conflictAction : 'uniquify'
});

downloading.then(onStartedDownload, onFailed);

score 3 · Accepted Answer

如果您正在寻找一个普通的 JavaScript（无 jQuery）解决方案并且不使用 HTML5 属性，您可以试试这个。

const download = document.getElementById("fileRequest");

download.addEventListener('click', request);

function request() {
    window.location = 'document.docx';
}

.dwnld-cta {
    border-radius: 15px 15px;
    width: 100px;
    line-height: 22px
}

<h1>Download File</h1>
<button id="fileRequest" class="dwnld-cta">Download</button>

score 2 · Accepted Answer

在我的测试中，只要您使用相对链接，以下内容适用于所有文件类型和浏览器：

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

/assets/hello.txt只是我网站上的相对路径。将其更改为您自己的相对路径。
my_file.txt是您希望文件在下载时被调用的名称。

解释

我注意到很多答案下都有评论说浏览器只会尝试打开文件本身而不是根据文件类型下载它。我发现这是真的。

我制作了两个按钮来使用两种不同的方法对其进行测试：

<button onclick="window.location.href='/assets/hello.txt';">Download 1</button>

<a href="/assets/hello.txt" download="my_file.txt"><button>Download 2</button></a>

备注：

按钮 1 在新的浏览器选项卡中打开了文本文件。但是，按钮 1会下载无法自行打开的文件类型的文件（例如，.apk 文件）。
按钮 2 下载了文本文件。但是，按钮 2 仅在路径是相对路径时才下载文件。当我将路径更改为绝对路径时，浏览器会在新选项卡中打开它。

我在 Firefox、Safari 和 Chrome 上对此进行了测试。

score 1 · Accepted Answer

这最终对我有用，因为要下载的文件是在加载页面时确定的。

JS 更新表单的 action 属性：

function setFormAction() {
    document.getElementById("myDownloadButtonForm").action = //some code to get the filename;
}

调用 JS 更新表单的 action 属性：

<body onLoad="setFormAction();">

带有提交按钮的表单标签：

<form method="get" id="myDownloadButtonForm" action="">
    Click to open document:  
    <button type="submit">Open Document</button>
</form>

以下没有工作：

<form method="get" id="myDownloadButtonForm" action="javascript:someFunctionToReturnFileName();">

score 1 · Accepted Answer

在您的<body>和</body>标签之间的任何地方，使用以下代码放入一个按钮：

<button>
    <a href="file.doc" download>Click to Download!</a>
</button>

这肯定行得通！

score 1 · Accepted Answer

如果您不能使用表单，另一种使用downloadjs的方法很合适。Downloadjs 在后台使用 blob 和 html 5 文件 API：

<div onClick=(()=>{downloadjs(url, filename)})/>

*它是 jsx/react 语法，但可以在纯 html 中使用

score 1 · Accepted Answer

<a href="file.doc"><button>Download!</button></a>
这将下载文件，因为.doc不支持在浏览器中打开文件扩展名。
按钮的最简单方法之一，这text-decoration将有助于更改或删除链接的文本装饰。

score 0 · Accepted Answer

不是对原始问题的真正答案，但它可能会帮助面临与我类似情况的其他人。

如果您要下载的文件不在同一来源上托管，但您希望能够下载它，则可以使用Content-Disposition header来执行此操作。确保服务器在响应文件请求时包含标头。

设置一个类似的值 Content-Disposition: attachment将确保文件将被下载而不是在浏览器中查看。

在这种情况下，一个简单的<a href="http://www.notMyOrigin.com/file.txt">Download</a>指向您的文件应该下载它。

score 0 · Accepted Answer

如果你想

<a href="path_to_file" download="proposed_file_name">Download</a>

为了能够下载将由浏览器呈现的文件，但仍然希望在按钮中使用简洁的 javascript 函数；您可以在 html 中有一个不可见的链接，然后在 javascript 中单击它。

function download_file() {
  document.getElementById("my_download").click()
}

<a id="my_download" href="path_to_file" download="file_name" style="display:none;"></a>

<button onClick="download_file()">Download!!!</button>

score 0 · Accepted Answer

您需要做的就是在您输入的文件名之后添加下载：

前：

<a href="file.doc">Download!</a>

后

<a href="file.doc" Download >Download!</a>

确保下载用大写字母书写，否则将无法正常工作。

score -1 · Accepted Answer

如果您有一个复杂的 URL，另一种方法是file.doc?foo=bar&jon=doe在表单中添加隐藏字段

<form method="get" action="file.doc">
  <input type="hidden" name="foo" value="bar" />
  <input type="hidden" name="john" value="doe" />
  <button type="submit">Download Now</button>
</form>

灵感来自@Cfreak 不完整的答案

score -1 · Accepted Answer

我想出的解决方案是您可以在锚标记中使用下载属性，但只有当您的 html 文件在服务器上时它才有效。但是你可能有一个问题，比如在设计一个简单的 html 页面时，我们如何检查你是否可以使用 VS code 实时服务器或括号实时服务器，你会看到你的下载属性可以工作，但如果你尝试简单地打开它只需双击 html 页面即可打开文件而不是下载文件。结论：仅当您的 html 文件不是服务器时，锚标记中的属性下载才有效。

score -8 · Accepted Answer

对我来说，添加按钮而不是锚文本效果很好。

<a href="file.doc"><button>Download!</button></a>

大多数规则可能不太好，但它看起来相当不错。

score -11 · Accepted Answer

如果您使用<a>标签，请不要忘记使用指向文件的整个 url - 即：

<a href="http://www.example.com/folder1/file.doc">Download</a>

javascript - 单击 HTML 按钮或 JavaScript 时如何触发文件下载

24 回答 24

解释

Related

Reference