Wie kann ich einen Download-Link in HTML erstellen?

Ich habe eine grundlegende Vorstellung von HTML. Ich möchte den Download-Link auf meiner Beispiel-Website erstellen, habe aber keine Ahnung, wie ich ihn erstellen soll. Wie erstelle ich einen Link, um eine Datei herunterzuladen, anstatt sie zu besuchen?

Diese Antwort ist veraltet. Wir haben jetzt das downloadAttribut . (siehe auch diesen Link zu MDN )

Wenn Sie unter "Download-Link" einen Link zu einer herunterzuladenden Datei verstehen, verwenden Sie

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

Dadurch target=_blankwird ein neues Browserfenster angezeigt, bevor der Download beginnt. Dieses Fenster wird normalerweise geschlossen, wenn der Browser feststellt, dass es sich bei der Ressource um einen Dateidownload handelt.

Beachten Sie, dass dem Browser bekannte Dateitypen (z. B. JPG- oder GIF-Bilder) normalerweise im Browser geöffnet werden.

Sie können versuchen, die richtigen Header zu senden, um einen Download wie hier beschrieben zu erzwingen . (Dafür ist serverseitiges Scripting oder Zugriff auf die Servereinstellungen erforderlich.)

In modernen Browsern, die HTML5 unterstützen, ist Folgendes möglich:

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

Sie können dies auch verwenden:

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

Auf diese Weise können Sie den Namen der tatsächlich heruntergeladenen Datei ändern.

Zusätzlich (oder als Ersatz) zu <a downloaddem bereits erwähnten HTML5- Attribut
kann das Download- Verhalten des Browsers auf die Festplatte auch durch den folgenden http-Antwortheader ausgelöst werden:

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

Dies war der Weg vor HTML5 (und funktioniert immer noch mit Browsern, die HTML5 unterstützen).

Ein Download-Link ist ein Link zu der Ressource, die Sie herunterladen möchten. Es ist genauso aufgebaut wie jeder andere Link:

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

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

Um auf die Datei zu verlinken, gehen Sie wie bei jedem anderen Seitenlink vor:

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

Um das Herunterladen von Dingen zu erzwingen, selbst wenn sie ein eingebettetes Plugin haben (Windows + QuickTime = ugh), können Sie dies in Ihrer htaccess / apache2.conf verwenden:

AddType application/octet-stream EXTENSION

Dieser Thread ist wahrscheinlich mittlerweile uralt, aber dies funktioniert in HTML5 für meine lokale Datei.

Für PDFs:

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

Dies sollte das PDF in einem neuen Fenster öffnen und es Ihnen ermöglichen, es herunterzuladen (zumindest in Firefox). Machen Sie für jede andere Datei einfach den Dateinamen. Für Bilder und Musik möchten Sie sie jedoch im selben Verzeichnis wie Ihre Site speichern. So wäre es

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

Das Download-Attribut funktioniert im IE nicht, es ignoriert den "Download" vollständig. Der Download funktioniert unter Firefox nicht, wenn die href auf eine entfernte Site verweist. Das Beispiel von Odin funktioniert also nicht mit Firefox 41.0.2.

Es gibt noch eine Subtilität, die hier helfen kann.

Ich möchte Links haben, die sowohl das Abspielen und Anzeigen im Browser als auch einen Link zum reinen Herunterladen ermöglichen. Das neue Download-Attribut ist in Ordnung, funktioniert jedoch nicht immer, da der Zwang des Browsers, die Datei abzuspielen oder anzuzeigen, immer noch sehr stark ist.

ABER .. dies basiert auf der Überprüfung der Erweiterung des Dateinamens der URL! Sie möchten nicht mit der Erweiterungszuordnung des Servers herumspielen, da Sie dieselbe Datei auf zwei verschiedene Arten bereitstellen möchten. Für den Download können Sie es also täuschen, indem Sie die Datei mit einem Namen verknüpfen, der für diese Erweiterungszuordnung undurchsichtig ist, darauf zeigen und dann die Umbenennungsfunktion des Downloads verwenden, um den Namen zu korrigieren.

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

Ich hatte gehofft, dass es funktionieren würde, wenn ich am Ende nur eine Dummy-Abfrage werfen oder die Erweiterung auf andere Weise verschleiern würde, aber leider nicht.

Das Download-Attribut ist neu für das <a>Tag in HTML5

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

Ich bevorzuge die erste, die in Bezug auf jede Erweiterung vorzuziehen ist.

Sie können auf verschiedene Arten herunterladen, die Sie meinem Weg folgen können. Obwohl Dateien möglicherweise nicht heruntergeladen werden können, weil die Berechtigung "Popups zulassen" nicht festgelegt ist, funktioniert dies in Ihrer Umgebung einwandfrei

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

Eine andere wird ebenfalls aufgrund von 'X-Frame-Optionen' bis 'sameorigin' fehlschlagen.

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

So was

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

Eine Datei name.jpg auf einer Site example.com würde also so aussehen

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

Ich weiß, ich bin spät dran, aber das habe ich nach 1 Stunde Suche bekommen

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

    ?>

und für den Download-Link habe ich dies getan

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