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

Question

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

Answer 1

在支持HTML5的现代浏览器中，可以使用以下内容：

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

您还可以使用此信息：

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

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

Answer 2

这个答案已过时。现在，我们有 下载 attribute 。 （另请参阅此链接到mdn ） /p>

（另请参 通过“下载链接”，您是指向文件链接下载的链接，使用

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

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

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

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

Answer 3

另外（或更换）到HTML5的＆lt; a download属性已经提到，
浏览器的下载到磁盘行为也可以由以下HTTP响应标头触发：

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

这是在HTML5之前进行的方法（并且仍然可以与支持HTML5的浏览器一起使用。

Answer 4

下载链接将是您要下载的资源的链接。它以其他任何链接的方式构建：

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

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

Answer 5

要链接到文件，

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

请执行与任何其他页面链接相同的操作：即使它们具有嵌入式插件（Windows + QuickTime = ugh），也可以在HTACCESS / APACHE2.CONF：

AddType application/octet-stream EXTENSION

Answer 6

到现在为止，这个线程可能是古老的，但是对于我的本地文件来说，这在HTML5中起作用。

对于pdfs：

＆lt; p＆gt;＆lt; a href =“ file：////.......... example.pdf”下载target =“ _ blank”＆gt; test pdf＆lt;/a＆gt;/a＆gt;＆lt; p＆gt;

这应该在新窗口中打开PDF，并允许您下载它（至少在Firefox中）。对于任何其他文件，只需将其制作为文件名即可。对于图像和音乐，您需要将它们存储在与网站同一目录中。所以会像

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

Answer 7

您可以通过两种方式使用

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

它将在旧浏览器中下载使用原始名称的文件此选项

2nd

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

在这里您可以选择重命名文件并使用其他名称下载

Answer 8

还有一个微妙的东西可以在这里提供帮助。

我想拥有允许浏览器播放和显示的链接，以及一个纯粹的下载链接。新的下载属性很好，但由于浏览器强迫播放或显示文件仍然非常强大，但无法一直工作。

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

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

我希望最后在最后扔一个虚拟查询，或者使扩展的混淆能够起作用，但可悲的是，事实并非如此。

Answer 9

是＆lt; a＆gt;标记中的新属性

下载属性 a＆gt;

或
＆lt; a href =“ http://www.odin.com/form.pdf”下载=“ form”＆gt; download form＆lt＆lt＆lt;/a＆gt;

我更喜欢第一个在尊重方面优先到任何扩展。

Answer 10

如果您将文件托管在AWS中，则可能对您有用。该代码非常容易理解。由于浏览器不支持相同的原始下载链接，因此解决图像URL的一种方法是将图像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)
    }

Answer 11

像这样

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

，示例上的文件名。

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

Answer 12

知道我迟到了

 <?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); }
    }

    ?>

我

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