如何在 HTML 中创建下载链接？

How can I create download link in HTML?

提问by Venkat

I have a basic idea of HTML. I want to create the download link in my sample website, but I don't have idea of how to create it. How do I make a link to download a file rather than visit it?

我对 HTML 有一个基本的了解。我想在我的示例网站中创建下载链接，但我不知道如何创建它。如何创建链接以下载文件而不是访问它？

采纳答案by Pekka

This answer is outdated. We now have the downloadattribute. (see also this link to MDN)

这个答案已经过时了。我们现在有了download属性。（另请参阅此链接到 MDN）

If by "the download link" you mean a link to a file to download, use

如果“下载链接”是指要下载的文件的链接，请使用

  <a href="http://example.com/files/myfile.pdf" target="_blank">Download</a>

the target=_blankwill make a new browser window appear before the download starts. That window will usually be closed when the browser discovers that the resource is a file download.

在target=_blank将下载开始之前，新的浏览器窗口出现。当浏览器发现资源是文件下载时，通常会关闭该窗口。

Note that file types known to the browser (e.g. JPG or GIF images) will usually be opened within the browser.

请注意，浏览器已知的文件类型（例如 JPG 或 GIF 图像）通常会在浏览器中打开。

You can try sending the right headers to force a download like outlined e.g. here. (server side scripting or access to the server settings is required for that.)

您可以尝试发送正确的标头以强制下载，例如此处概述的。（为此需要服务器端脚本或访问服务器设置。）

回答by Felix G.

In modern browsers that support HTML5, the following is possible:

在支持 HTML5 的现代浏览器中，以下是可能的：

<a href="link/to/your/download/file" download>Download link</a>

You also can use this:

你也可以使用这个：

<a href="link/to/your/download/file" download="filename">Download link</a>

This will allow you to change the name of the file actually being downloaded.

这将允许您更改实际下载的文件的名称。

回答by Myobis

In addition (or in replacement) to the HTML5's <a downloadattribute already mentioned,
the browser's download to diskbehavior can also be triggered by the following http response header:

除了（或替代）<a download已经提到的 HTML5 的属性之外，
浏览器的下载到磁盘行为也可以由以下 http 响应标头触发：

Content-Disposition: attachment; filename=ProposedFileName.txt;

This was the way to do before HTML5 (and still works with browsers supporting HTML5).

这是 HTML5 之前的做法（并且仍然适用于支持 HTML5 的浏览器）。

回答by Oded

A download link would be a link to the resource you want to download. It is constructed in the same way that any other link would be:

下载链接是指向您要下载的资源的链接。它的构造方式与任何其他链接相同：

<a href="path to resource.name of file">Link</a>

<a href="files/installer.exe">Link to installer</a>

回答by Delan Azabani

To link to the file, do the same as any other page link:

要链接到该文件，请执行与任何其他页面链接相同的操作：

<a href="...">link text</a>

To force things to download even if they have an embedded plugin (Windows + QuickTime = ugh), you can use this in your htaccess / apache2.conf:

要强制下载内容，即使它们有嵌入式插件（Windows + QuickTime = ugh），您可以在 htaccess / apache2.conf 中使用它：

AddType application/octet-stream EXTENSION

回答by johan

This thread is probably ancient by now, but this works in html5 for my local file.

这个线程现在可能很古老，但这适用于我的本地文件的 html5。

For pdfs:

对于 pdf：

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

<p><a href="file:///........example.pdf" download target="_blank">test pdf</a></p>

This should open the pdf in a new windows and allow you to download it (in firefox at least). For any other file, just make it the filename. For images and music, you'd want to store them in the same directory as your site though. So it'd be like

这应该会在新窗口中打开 pdf 并允许您下载它（至少在 Firefox 中）。对于任何其他文件，只需将其设为文件名。对于图像和音乐，您可能希望将它们存储在与您的站点相同的目录中。所以它会像

<p><a href="images/logo2.png" download>test pdf</a></p>

回答by Bill Coffin

The download attribute doesn't work in IE, it ignores the "download" completely. The download doesn't work on Firefox if the href points to a remote site. So Odin's example doesn't work on Firefox 41.0.2.

下载属性在 IE 中不起作用，它完全忽略了“下载”。如果 href 指向远程站点，则下载在 Firefox 上不起作用。所以 Odin 的例子在 Firefox 41.0.2 上不起作用。

回答by jhhl

There's one more subtlety that can help here.

这里还有一个微妙之处可以提供帮助。

I want to have links that both allow in-browser playing and display as well as one for purely downloading. The new download attribute is fine, but doesn't work all the time because the browser's compulsion to play the or display the file is still very strong.

我想要既允许在浏览器中播放和显示的链接，也允许纯粹下载的链接。新的下载属性很好，但不是一直有效，因为浏览器播放或显示文件的强迫性仍然很强。

BUT.. this is based on examining the extension on the URL's filename!You don't want to fiddle with the server's extension mapping because you want to deliver the same file two different ways. So for the download, you can fool it by softlinking the file to a name that is opaque to this extension mapping, pointing to it, and then using download's rename feature to fix the name.

但是...这是基于检查 URL 文件名的扩展名！您不想摆弄服务器的扩展名映射，因为您想以两种不同的方式交付相同的文件。所以对于下载，你可以通过将文件软链接到一个对这个扩展映射不透明的名称来欺骗它，指向它，然后使用下载的重命名功能来修复名称。

<a target="_blank" download="realname.mp3" href="realname.UNKNOWN">Download it</a>
<a target="_blank" href="realname.mp3">Play it</a>

I was hoping just throwing a dummy query on the end or otherwise obfuscating the extension would work, but sadly, it doesn't.

我希望只是在最后抛出一个虚拟查询或以其他方式混淆扩展名会起作用，但遗憾的是，它没有。

回答by king neo

You can download in the various way you can follow my way. Though files may not download due to 'allow-popups' permission is not set but in your environment, this will work perfectly

您可以按照我的方式以各种方式下载。尽管由于未设置“允许弹出窗口”权限，文件可能无法下载，但在您的环境中，这将完美运行

<div className="col-6">
                    <a  download href="https://www.w3schools.com/images/myw3schoolsimage.jpg" >Test Download </a>
                </div>

another one this one will also fail due to 'X-Frame-Options' to 'sameorigin'.

由于“X-Frame-Options”到“sameorigin”，另一个这个也会失败。

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
  <img src="https://www.w3schools.com/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>

回答by Odin

The download attribute is new for the <a>tag in HTML5

下载属性是<a>HTML5 中标签的新属性

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
or
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

<a href="http://www.odin.com/form.pdf" download>Download Form</a>
或者
<a href="http://www.odin.com/form.pdf" download="Form">Download Form</a>

I prefer the first one it is preferable in respect to any extension.

我更喜欢第一个，它比任何扩展都更可取。