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

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有一个基本的概念。我想在我的示例网站上创建下载链接，但是我不知道如何创建它。如何创建一个下载文件的链接而不是访问它?

10 个解决方案

#1

124

This answer is outdated. We now have the download attribute as described here.

这个答案已经过时了。我们现在有了这里描述的下载属性。

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=_blank will 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.)

您可以尝试发送正确的头文件来强制下载，比如这里。(需要服务器端脚本或访问服务器设置)

#2

355

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.

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

#3

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

此外(或替代)HTML5的

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

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

这是HTML5出现之前的做法(现在仍然适用于支持HTML5的浏览器)。

#4

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>

#5

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

#6

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

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

For pdfs:

pdf文件:

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

< a href = " file:/ / / ........例子。pdf”下载目标= "平等" >测试pdf < / >

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

这将在新的windows中打开pdf，并允许您下载它(至少在firefox中)。对于任何其他文件，只需将其命名为文件名。对于图像和音乐，您希望将它们存储在与站点相同的目录中。这就像

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

#7

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

下载属性是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>

下载表格或下载表格

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

我喜欢第一个，它比任何扩展都好。

#8

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。2上运行。

#9

-3

Like this

像这样

<a href="www.yoursite.com/theThingYouWantToDownload">Link name</a>

So a file name.jpg on a site example.com would look like this

所以网站example.com上的文件名。jpg应该是这样的

<a href="www.example.com/name.jpg">Image</a>

#10

-3

i know i am late but this is what i got after 1 hour of search

我知道我迟到了，但这是我找了一个小时后得到的结果

 <?php 
      $file = 'file.pdf';

    if (! file) {
        die('file not found'); //Or do something 
    } else {
       if(isset($_GET['file'])){  
        // Set headers
        header("Cache-Control: public");
        header("Content-Description: File Transfer");
        header("Content-Disposition: attachment; filename=$file");
        header("Content-Type: application/zip");
        header("Content-Transfer-Encoding: binary");
        // Read the file from disk
        readfile($file); }
    }

    ?>

and for downloadable link i did this

对于可下载的链接，我这样做了

<a href="index.php?file=file.pdf">Download PDF</a>

#1

124