如何使用锚标签 <a> 下载文件

Posted 2023-02-21

【中文标题】如何使用锚标签 <a> 下载文件

【英文标题】：How to download file using anchor tag <a>

【发布时间】：2022-01-07 00:09:20

【问题描述】：

为什么这不起作用：

download.html

<a href="jsplogin.jar">download</a>

jsplogin.jar 文件与download.html 文件位于同一文件夹中。

当我点击下载链接时，文件jsplogin.jar 应该下载 但它试图在浏览器中打开文件。 当我右键单击链接并选择“保存链接”时，什么也没有发生。

【问题讨论】：

如果你把它改成另一个文件，这行得通吗？

How can I create download link in HTML?的可能重复

【参考方案1】：

下载属性对我不起作用，但确实如此：

<a href="myfile.csv" target="_blank">Download</a>

打开一个新选项卡但下载文件并在意识到它不是应该呈现的文件类型时关闭选项卡。在我的情况下，它是一个 .csv，我没有使用 .jar 进行测试，但我想你会得到相同的结果。

【参考方案2】：

使用“下载”属性：

<a href="jsplogin.jar" download>download</a>

【讨论】：

这不是自动创建 blob。 href链接是后端服务器中文件的链接。因此，它不是创建一个 blob，而是在浏览器中显示它。

【参考方案3】：

在 HTML5 中，在大多数浏览器中，您可以将“下载”属性添加到 a 元素。

例如：

<a href="http://www.example.com/index.html" download>Download</a>

基于这个问题。 How can I create download link in html?

【讨论】：

下载属性在 Safari 上不起作用。并且没有未来支持的计划。 caniuse.com/#feat=downloadSafari 不亚于 IE 有点意思

这在 mozilla firefox 中不起作用。当我锚定 .jpg 文件时，它会将我重定向回新标签

@catch22 caniuse.com/#feat=download （我自己在 windows 上的 edge 和 firefox 中对其进行了测试，它确实有效）重要的是要注意此属性仅适用于同源 URL。