Wie kann ich einen Download-Link in HTML erstellen?

224

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?

Venkat
quelle
11
Das Akzeptanzzeichen für diese Frage sollte gewechselt werden.
Pekka

Antworten:

163

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

Pekka
quelle
1
Warum nicht das Download-Attribut verwenden? Wenn Sie eine Datei wie ein JPG erhalten, wird sie heruntergeladen, anstatt nur zu öffnen.
Ben
2
Bitte lassen Sie das "target = '_ blank'" weg, da dies im IE nicht funktioniert. Hast du es überhaupt getestet?
Tara
4
@Dudeson Bitte geben Sie an, was "nicht funktioniert" und über welche Version (en) von IE Sie sprechen. (Es ist jetzt sicher, den Ansatz zu verwenden, der unten in der viel neueren Antwort von TIIUNDER beschrieben wird. Er sollte die Akzeptanznote erhalten.)
Pekka
2
@Sergiu die Antwort ist sieben Jahre alt. Ich kann es nicht löschen und der Fragesteller hat nicht auf meine Anfrage geantwortet, die Akzeptanzmarke zu wechseln ... nichts, was wir tun können, obwohl ich einen Link zur aktuelleren Antwort hinzufügen werde
Pekka
1
@Dani siehe TIIUNDERs Antwort unten, die jetzt die richtige ist.
Pekka
455

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.

Felix G.
quelle
Ich habe den gleichen Code zum Herunterladen der PFD-Datei verwendet und in allen Browsern getestet. Alle unterstützen, aber in Safari funktioniert dieser Code nicht auf Safari, anstatt die PDF-Datei herunterzuladen, die in einem neuen Tab geöffnet ist.
Renish Khunt
6
caniuse.com/#search=download%20attribute Funktioniert in Chrome-, Edge-, Firefox-, Opera- und den neuesten Android 4.4+ Browsern und nicht in Internet Explorer und Safari.
Bart Verkoeijen
Wie mache ich das, wenn ich den Link dynamisch mit einem Klick auf eine Schaltfläche erstelle?
Nongthonbam Tonthoi
1
@NongthonbamTonthoi kann nicht Sie können Javascript verwenden, um die href dynamisch dem a-Tag
zuzuweisen
1
Dies wird nicht unbedingt funktionieren, da es auf URLs gleichen Ursprungs beschränkt ist.
Nathan
22

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

Myobis
quelle
4
Aber das erfordert eine serverseitige Implementierung, richtig?
Lombas
@Lombas ja, nur der Server kann die http-Antwortheader setzen.
Myobis
Ist das die vollständige Antwort? Sie müssen auch einen Inhaltstyp-Header senden und die Datei lesen, um den Download zu erzwingen. Vielleicht möchten und das zu Ihrer Antwort. Vollständige Antwort hier: stackoverflow.com/a/1465631/2757916 .
Govind Rai
Dies ist perfekt für die serverseitige Implementierung, genau wie auch der Inhaltstyp. es wird gut unterstützt im Vergleich zu dem downloadAttribut
william.eyidi
9

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>
Oded
quelle
8

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
Delan Azabani
quelle
Vielen Dank! Das ist viel einfacher und serverweit! : DI hat diesen Link gefunden, der etwas ausführlicher ist. Danke dir. htaccess-guide.com/adding-mime-types
Joe DF
Dadurch werden alle Dateien dieses Typs nur heruntergeladen. Gut, wenn Sie dies wünschen, kann aber zu Passungen führen, wenn Sie vergessen und möchten, dass eine andere Datei dieses Typs im Browser angezeigt wird, anstatt sie herunterzuladen.
TecBrat
4

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>
Johan
quelle
2

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.

Bill Coffin
quelle
1

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.

jhhl
quelle
0

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.

Odin
quelle
0

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>

König Neo
quelle
-3

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>
Con
quelle
Das Problem mit letzterem ist, dass es im Browser geöffnet wird und nicht zum Herunterladen und Speichern angeboten wird.
Pekka
9
Wird nicht funktionieren; Der Browser behandelt es als relativen Link zu ./www.example.com/name.jpg- Sie müssen ihn http://für absolute Links mit der angegebenen Domain verwenden.
Delan Azabani
-7

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>
Sikander
quelle
6
Das ist fürchterlich. Wenn ich einen solchen Download-Link sehe, muss ich mich dem Drang widersetzen, index.php? File = index.php zu versuchen, was bei einer Copy / Paste-Implementierung Ihres Codes einer böswilligen Person schließlich Zugriff auf Ihre Datenbank verschaffen würde und wer weiß was.
M. Stramm
1
Schlechte Idee. Erstens, weil Sie dafür sorgen, dass Ihr Server mehr als nötig funktioniert. Zweitens, weil die Benutzer jede Datei herunterladen können: p
José Neto