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

Question

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

htmldownload

289

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

- Venkat

12个回答

185

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

如果你所说的“下载链接”是指用于下载文件的链接，请使用：

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

target=_blank会在下载开始前打开一个新的浏览器窗口。当浏览器检测到资源是文件下载时，该窗口通常会被关闭。

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

您可以尝试发送正确的标头以强制下载，例如这里所概述的方式。（服务器端脚本或对服务器设置的访问权限是必须的。）

- Pekka

3

为什么不使用下载属性，如果你获取像jpg这样的文件，它将被下载而不是只是打开。 - Ben

2

请忽略 "target='_blank'"，因为在IE中无法正常工作。你测试过它吗？ - Tara

4

@Dudeson，请具体说明哪些IE版本不起作用，以及你所说的“不起作用”指的是什么。（现在可以安全地使用TIIUNDER在下面提供的更加最新的答案中描述的方法，它应该会被接受。） - Pekka

2

@Sergiu，这个答案已经七年了。我无法删除它，而且提问者也没有回复我的请求来更改采纳标记...我们无能为力，不过我会添加一个链接到更加当前的答案。 - Pekka

2

@Dani请看下面TIIUNDER的答案，那是现在正确的答案。 - Pekka

显示剩余9条评论

27

除了已经提到的HTML5的<a download属性外，浏览器的“下载到磁盘”行为也可以通过以下HTTP响应头来触发：

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

这是在 HTML5 之前的方法（对支持 HTML5 的浏览器仍然有效）。

- Myobis

5

需要进行服务器端实现，是吗？ - Lombas

@Lombas 是的，只有服务器可以设置HTTP响应头。 - Myobis

这是完整的答案吗？您还需要发送Content Type头并读取文件以强制下载。建议将此添加到您的答案中。完整答案在此处：https://dev59.com/EHM_5IYBdhLWcg3wPAjT#1465631。 - Govind Rai

这非常适合服务器端实现，只需精确指定内容类型即可。与“download”属性相比，它得到了很好的支持。 - william.eyidi

可能可以通过代理请求到一个能够添加这个头部的服务工作者来强制执行，但我不确定。 - Mattwmaster58

11

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

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

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

- Oded

10

要链接到文件，与其他页面链接相同：

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

如果想要强制下载即使它们有内嵌插件（Windows + QuickTime = 呕吐），可以在htaccess / apache2.conf中使用以下内容：

AddType application/octet-stream EXTENSION

- Delan Azabani

谢谢！这个简单多了，而且是服务器级别的！:D我找到了这个链接，更详细地阐述了一些。谢谢。http://www.htaccess-guide.com/adding-mime-types/ - Joe DF

这将使该类型的所有文件仅下载。如果这正是您想要的，那很好，但如果您忘记并希望另一个该类型的文件在浏览器中显示而不是下载，则可能会引起问题。 - TecBrat

7

这篇帖子可能已经过时了，但是它适用于我的本地文件的html5。

对于pdf文件：

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

这将在新窗口中打开pdf文件并允许您下载它（至少在firefox中）。对于任何其他文件，只需将其设置为文件名即可。对于图像和音乐，您需要将它们存储在与站点相同的目录中。因此，它会像这样：

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

- johan

2

你可以有两种方式使用它。

<a href="yourfilename" download>Download</a>

它将下载带有原始名称的文件。在旧的浏览器中，这个选项是不可用的。

第二

<a href="yourfilename" download="newfilename">Download</a>

您可以选择重命名文件并使用不同的名称下载。

- Muhammad Azam

这个线程中的这个选项和其他选项都不起作用。 - Rahul

这适用于最新的浏览器（Firefox 117和Edge 115）。 - dns

2

这里还有一个微妙之处可以帮助解决问题。

我想要同时拥有在浏览器中播放和展示的链接以及仅供下载的链接。新的下载属性很好，但并不总是有效，因为浏览器对于播放或展示文件的强制性仍然非常强烈。

但是，这是基于检查URL文件名的扩展名！您不想更改服务器的扩展名映射，因为您希望以两种不同的方式传递相同的文件。因此，为了下载，您可以通过将文件软链接到对于此扩展名映射不透明的名称上并指向它，然后使用下载的重命名功能来修复名称。

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

我本以为在查询末尾添加一个虚拟查询或者通过混淆扩展名的方式可以解决问题，但可惜并不行。

- jhhl

运行代码片段中的两个按钮对我来说都无法工作。 - Yevhenii Bahmutskyi

0

HTML5中，<a>标签的下载属性是新功能。

<a href="http://www.odin.com/form.pdf" download>下载表格</a>
或者
<a href="http://www.odin.com/form.pdf" download="表格">下载表格</a>

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

- Odin

0

如果您将文件托管在AWS上，这可能适用于您。代码非常易于理解。由于浏览器不支持同源下载链接，解决方法之一是将图像URL转换为base64 URL。然后，您可以正常下载它。

    var canvas = document.createElement("canvas")
    var ctx = canvas.getContext('2d')

    var img = new Image()
    img.src = your_file_url + '?' + new Date().getTime();
    img.setAttribute('crossOrigin', '')

    var array = your_file_url.src.split("/")
    var fileName = array[array.length - 1]

    img.onload = function() {
        canvas.width = img.naturalWidth
        canvas.height = img.naturalHeight
        ctx.drawImage(img,
            0, 0, img.naturalWidth, img.naturalHeight,
            0, 0, canvas.width, canvas.height)

        var dataUrl = canvas.toDataURL("image/png", 1)

        var a = document.createElement('a')
        a.href = dataUrl
        a.download = fileName
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
    }

- T H

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix G. · Accepted Answer

559

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

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

你也可以使用这个：

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

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

- Felix G.

1

我使用了相同的代码来下载PDF文件，并在所有浏览器中进行了测试，都支持，但在Safari中，这段代码无法工作，Safari会在新标签页中打开PDF文件，而不是下载。 - Renish Khunt

10

适用于Chrome、Edge、Firefox、Opera以及最新的Android 4.4+浏览器，但不适用于Internet Explorer和Safari。该网站链接为：http://caniuse.com/#search=download%20attribute。 - Bart Verkoeijen

1

@NongthonbamTonthoi 你能否使用JavaScript动态地为a标签分配href属性？ - akshay kishore

22

这并不一定会奏效，因为它仅限于同源 URL。 - Nathan

3

这对我不起作用，我有一个.exe文件想要让用户下载。然而，我自己尝试了一下，但是这个方法行不通。它只会把我带到源代码，我不希望别人看到。 - Daniyal Warraich

显示剩余3条评论