So erstellen Sie einen Download-Link

2024 Autor: Abigail Brown | [email protected]. Zuletzt bearbeitet: 2023-12-17 06:43

Es ist interessant, wie sich bei manchen Dingen der Kreis schließt. In den frühen Tagen des Webs luden Browser automatisch Links zu Dateien herunter, die keine Webseite waren, wie Bilder, PDF-Dateien und Dokumente. Dann wurden die Browser so fortschrittlich, dass sie fast jede Datei in Echtzeit öffnen konnten. Das verursachte jedoch ein Problem für Entwickler. Wie würden Sie einen Browser zwingen, eine Datei herunterzuladen, anstatt sie zu öffnen? Eine Reihe von Hacks und Problemumgehungen wurden entwickelt, um das Problem zu lösen, aber keiner war eine echte Lösung. Das änderte sich mit HTML5, als das Download-Attribut eingeführt wurde.

Jetzt können Entwickler ihren HTML-Anchor-Tags ein spezielles Download-Attribut hinzufügen, um Browser anzuweisen, einen Link als Download zu behandeln, anstatt die Zieldatei zu öffnen. Es gibt verschiedene Möglichkeiten, wie Sie das Download-Attribut verwenden können, um zu steuern, wie Browser Ihre Download-Links handhaben. Noch besser ist, dass alle modernen Browser das Download-Attribut unterstützen, sodass Sie keine Probleme mit der Kompatibilität oder der Notwendigkeit eines Fallbacks sehen sollten.

Es gibt verschiedene Möglichkeiten, wie Sie mit dem Download-Attribut umgehen können. Jedes hat seine eigenen Vorteile und funktioniert reibungslos in verschiedenen Browsern.

Das einfache Download-Attribut

Der einfachste Weg, das Download-Attribut zu verwenden, besteht darin, es einfach in seiner grundlegendsten Form in Ihre Anchor-Tags aufzunehmen. Sie müssen keinen zusätzlichen Dateinamen oder unterstützende Informationen angeben. Das Ergebnis sieht so aus:

Jetzt herunterladen!





Indem Sie "download" einfügen, weisen Sie jeden Browser, der die Seite liest, an, den Ziellink herunterzuladen, anstatt ihn zu öffnen. In diesem Fall lädt der Browser die Datei mit demselben Namen genau so herunter, wie sie ist.






Ändern des Dateinamens
Was passiert, wenn Sie den Namen tatsächlich ändern möchten. Es gibt viele Gelegenheiten, bei denen Sie dies tun möchten. Ein gutes Beispiel sind automatisch generierte Dateinamen. Sie haben normalerweise lächerlich lange Namen mit Zeichenfolgen aus Müllzeichen. Das ist nicht die Erfahrung, die Sie für Ihre Besucher wünschen. Mit dem Download-Attribut können Sie Dinge standardisieren.
Um einen Dateinamen anzugeben, setzen Sie das Download-Attribut darauf. Schließen Sie die Dateierweiterung aus. Der Browser kann und will den Dateityp nicht konvertieren, also macht es keinen Sinn es zu versuchen.
Jetzt herunterladen!
Ihre Besucher werden die Datei als your-file.pdf herunterladen.

Bild herunterladen
Dazu gehört auch eine vereinfachte Methode, mit der Ihre Benutzer Bilder direkt herunterladen können. Dies ist nicht revolutionär und Sie können es wahrscheinlich selbst zusammensetzen, aber Sie können das Download-Attribut verwenden, um einen herunterladbaren Bildlink zu erstellen.





Erstellen Sie zunächst ein Bild, wie Sie es normalerweise auf Ihrer Seite tun würden. Dies ist natürlich das Bild, das zum Download zur Verfügung steht.
Verkapseln Sie das Ganze dann in einem Anchor-Tag und verlinken Sie es mit dem Bildpfad.
Fügen Sie zum Schluss das Download-Attribut zu Ihrem Anchor-Tag hinzu. Sie können den Namen Ihres Bildes ändern, wenn Sie möchten.





Jetzt, wenn ein Besucher auf das Bild klickt, lädt er es automatisch direkt von Ihrem Server herunter. Es ist nicht notwendig und mag einem Entwickler übertrieben erscheinen, aber wie viele Website-Besucher würden auf die Idee kommen, mit der rechten Maustaste auf ein Bild zu klicken, um es anzuzeigen oder herunterzuladen?