如何在 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

這個答案已經過時了。 我們現在有了download屬性。 （另請參閱此鏈接到 MDN ）

如果“下載鏈接”是指要下載的文件的鏈接，請使用

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

target=_blank將在下載開始之前出現一個新的瀏覽器窗口。 當瀏覽器發現資源是文件下載時，通常會關閉該窗口。

請注意，瀏覽器已知的文件類型（例如 JPG 或 GIF 圖像）通常會在瀏覽器中打開。

您可以嘗試發送正確的標題以強制下載，例如此處概述。 （為此需要服務器端腳本或訪問服務器設置。）

Answer 3

除了已經提到的 HTML5 的<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。

對於 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>

Answer 7

這里還有一個更微妙的地方可以提供幫助。

我想要一個既允許在瀏覽器內播放和顯示的鏈接，又一個用於純粹下載的鏈接。 新的下載屬性很好，但並不是一直有效，因為瀏覽器播放或顯示文件的強制力仍然很強。

但是..這是基於檢查 URL 文件名上的擴展名！您不想擺弄服務器的擴展名映射，因為您想以兩種不同的方式傳遞相同的文件。 因此，對於下載，您可以通過將文件軟鏈接到對該擴展映射不透明的名稱來欺騙它，指向它，然后使用下載的重命名功能來修復名稱。

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

我希望只是在最后拋出一個虛擬查詢或以其他方式混淆擴展名會起作用，但遺憾的是，它沒有。

Answer 8

下載屬性在IE中不起作用，它完全忽略了“下載”。 如果href指向遠程站點，則下載在Firefox上不起作用。 所以Odin的例子不適用於Firefox 41.0.2。

Answer 9

下載屬性是 HTML5 中<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>

我更喜歡第一個，它對於任何擴展都是更可取的。

Answer 10

您可以按照我的方式以各種方式下載。 盡管由於未設置“允許彈出窗口”權限，文件可能無法下載，但在您的環境中，這將完美運行

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

由於“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>

Answer 11

如果您在 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)
    }

Answer 12

像這樣

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

所以網站 example.com 上的文件 name.jpg 看起來像這樣

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

Answer 13

我知道我遲到了，但這是我搜索 1 小時后得到的

 <?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>