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

IT技术 javascript html download
2021-02-08 19:27:40

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

我想要一个简单的文件下载,它的作用与此相同:

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

但我想使用 HTML 按钮,例如以下任一按钮:

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

同样,是否可以通过 JavaScript 触发简单的下载?

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

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

6个回答

您可以使用 HTML5download属性触发下载

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

在哪里:

  • path_to_file是路径解析为URL同根同源这意味着页面和文件必须共享相同的域、子域、协议(HTTP 与 HTTPS)和端口(如果指定)。例外是blob:data:(总是有效),和file:(从不有效)。
  • proposed_file_name是要保存到的文件名。如果为空,则浏览器默认为文件名。

文档:MDNHTML标准上下载HTML标准上downloadCanIUse

这如何应用于按钮对象而不仅仅是a 标签
2021-03-25 19:27:40
使用的组合download,并target="_blank"似乎足以应付大多数使用情况。理解的浏览器download将其视为下载,否则会在新选项卡中打开。
2021-04-01 19:27:40
不适用于 Safari 和某些 IE 版本
2021-04-04 19:27:40
实际上,这仅适用于 MDN 文档中提到的相同来源的 url。如果我们要开发通用解决方案,这是一个巨大的限制
2021-04-09 19:27:40
问题是明确要求使用按钮而不是链接
2021-04-09 19:27:40

对于按钮,你可以做

<form method="get" action="file.doc">
   <button type="submit">Download!</button>
</form>
@kscius 即使在今天,IE 11 也不支持下载属性(Edge 现在支持它),Safari 也不支持它。在 2012 年最初发布答案时,任何主要浏览器都不支持它。
2021-03-31 19:27:40
这效果更好:<a href="path_to_file" download="proposed_file_name">下载</a>
2021-04-01 19:27:40
不作为触发器工作,只是重定向到 url 作为“a”标签。
2021-04-08 19:27:40
具有按钮样式的锚点和具有按钮的表单之间有什么区别?
2021-04-08 19:27:40
不一定会触发下载。它只是让浏览器导航到file.doc. 这是否导致file.doc被下载或在浏览器中显示为页面取决于服务器在服务时返回的标头file.doc以及浏览器能够呈现的文件类型。
2021-04-08 19:27:40

HTML:

<button type="submit" onclick="window.open('file.doc')">Download!</button>
如果我想下载一个 xml 文件怎么办?
2021-03-11 19:27:40
如果您有浏览器可接受的文件,例如 PDF,它将在新选项卡中打开,而不是显示下载对话框。
2021-03-12 19:27:40
感谢您的代码。我已经测试过,它可以在 IE、Chrome、Firefox 中工作。
2021-03-18 19:27:40
这不一定会触发下载。它只是让浏览器导航到file.doc. 这是否导致 file.doc 被下载或在浏览器中显示为页面取决于服务器在服务时返回的标头file.doc以及浏览器能够呈现的文件类型。
2021-03-31 19:27:40
window.open 可以在浏览器中触发弹出窗口阻止,因此不推荐。您可以使用 window.location = 'path' ,尽管这会转到同一浏览器窗口中的位置。
2021-04-03 19:27:40

一个简单的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)
}
有没有办法在下载完成后触发 javascript 功能?只是尝试在下载开始后显示一条消息,并在下载完成后删除该消息。
2021-03-18 19:27:40
@NicholasKyriakides 有点让我想起这颗宝石:image.ibb.co/dtkUWJ/Selection_002.png
2021-03-26 19:27:40
@BryanLarsen 你是对的,Firefox 不允许在不先将元素添加到 body 的情况下这样做。谢谢,更新答案
2021-03-31 19:27:40
这是最好的解决方案,应该被接受。
2021-04-05 19:27:40
@mohitbansal(联合国)幸运的是没有,因为它在浏览器级别
2021-04-06 19:27:40

使用 jQuery:

$("#fileRequest").click(function() {
    // hope the server sets Content-Disposition: attachment!
    window.location = 'file.doc';
});
如果您尝试下载图像,这不起作用,它会在浏览器中打开图像
2021-03-19 19:27:40
没有“最”。这完全取决于。不要依赖它被设置。
2021-03-23 19:27:40
很好,谢谢。您是否知道大多数服务器是否会默认将 Content-Disposition 设置为“附件”?
2021-03-27 19:27:40
没有jquery。时期。
2021-03-27 19:27:40
这个问题一直让我很兴奋,这是唯一有效的选择(并且得到 IE 的支持)。我将添加任何像我这样的 n00bs 来设置 Content-Disposition,你所要做的就是: <?php header('Content-Disposition: attachment; filename="filename.here"'); ?>
2021-04-01 19:27:40