Erstellen Sie einen Download-Link in HTML

In diesem Artikel wird eine Möglichkeit vorgestellt, einen Download-Link in HTML zu erstellen.

Verwenden Sie das Attribut download, um einen Download-Link in HTML zu erstellen

Wir können das Attribut download innerhalb eines Ankerelements in HTML verwenden, um einen Download-Link zu erstellen. Im Anchor-Tag können wir mit Hilfe des Attributs href den Link der herunterzuladenden Datei angeben.

Das Anker-Tag erstellt einen Hyperlink zur Zieldatei, und wenn wir auf den Link klicken, wird die Datei heruntergeladen. Wenn wir einen Wert für das Attribut download festlegen, wird die Datei mit diesem Namen heruntergeladen.

Erstellen Sie beispielsweise ein <a>-Tag und legen Sie den Pfad der herunterzuladenden Datei im href-Attribut fest. Hier ist die Datei ein Bild, parker.jpeg.

Schreiben Sie das Attribut download neben das Attribut href. Schreiben Sie den Text Download zwischen die Anchor-Tags, um einen klickbaren Text zu erstellen.

Hier liegt das Bild im selben Ordner wie die HTML-Datei.

Wenn Sie auf den Link Download klicken, werden wir aufgefordert, die Datei herunterzuladen. Das Wichtigste, was Sie beim Erstellen eines Download-Links beachten sollten, ist, dass die Webseite auf einem Server gehostet werden sollte.

Wir werden nur dann zum Herunterladen der Datei aufgefordert, wenn die Datei auf einem Live-Server ausgeführt wird. Wenn wir beispielsweise eine HTML-Datei erstellen und die Datei öffnen, wird die Datei im Browser aus dem lokalen Dateisystem geöffnet.

Die URL sieht ungefähr so aus wie file:///var/www/html/index.html. Wenn wir unter solchen Bedingungen auf den Link klicken, wird das Bild auf der Webseite angezeigt, was nicht das ist, was wir wollen.

Wir können einige Möglichkeiten implementieren, um die HTML-Datei auf einem Server auszuführen. Eine Möglichkeit besteht darin, den lokalen Server in Ihrem System zu starten und die HTML-Datei vom lokalen Host bereitzustellen.

Es ist eine elegante Art, einen Server zu betreiben. So können wir mit dem Attribut download im Anchor-Tag in HTML einen Download-Link erstellen.

Beispielcode:

<a href="/img/DelftStack/logo.png" download> Download </a>