Tipp Verwenden Sie das HTML5-Attribut download

Das Erstellen eines Download-Links in HTML ist unkompliziert. Fügen Sie ein Ankertag hinzu und verweisen Sie auf die Datei im href Attribut. Einige Dateitypen (z. B. Bilder, .pdf, .txt und .doc) werden jedoch nicht heruntergeladen. Sie werden stattdessen im Browser geöffnet.

Wenn Sie serverseitigen Zugriff auf Ihre Website haben, gibt es einige Problemumgehungen, z. B. die Konfiguration der .htaccess, um diese Dateien direkt herunterzuladen. Wenn Ihre Website mit einem kostenlosen Dienst wie WordPress.com, Blogspot oder möglicherweise Github-Seiten gehostet wird, die dies nicht zulassen, sollten Sie die herunterladen Attribut.

Verwenden des Attributs "Download"

Das herunterladen Attribut ist Teil der HTML5-Spezifikation und drückt einen Link als aus herunterladen Link statt einer navigational Verknüpfung.

Das herunterladen Außerdem können Sie den Dateinamen beim Herunterladen umbenennen. Wenn sich die Datei auf dem Server befindet, insbesondere wenn sie automatisch generiert wurde, kann sie beispielsweise systematisch mit Zahlen und Bindestrichen benannt werden acme-doc-2.0.1.txt. Es wäre besser für Benutzer, die Datei mit einem sinnvolleren Namen zu erhalten, wenn sie heruntergeladen wird. Acme-Dokumentation (Version 2.0.1) .txt (die Dateierweiterung nicht vergessen).

So würde das in der Praxis aussehen:

Text herunterladen 

Probieren Sie es auf der Demo-Seite aus, und Sie sollten die heruntergeladene Datei mit dem Namen finden, der im angegeben ist herunterladen Attribut.

Ein paar Anmerkungen:

• In Firefox können Benutzer aus Sicherheitsgründen nur Dateien desselben Ursprungs herunterladen. Die Datei muss von Ihrem eigenen Server oder Domänennamen stammen, andernfalls wird sie im Browser geöffnet.
• Das Herunterladen von Cross-Origin-Dateien ist in Chrome und der neuesten Opera (mit Chromium / Blink) zulässig, beide ignorieren jedoch den Attributwert. Der Dateiname bleibt also unverändert.

Fallback bereitstellen

Zum Zeitpunkt des Schreibens der herunterladen Das Attribut ist in Safari und (wie Sie vielleicht erwarten) Internet Explorer noch nicht implementiert. Nach dem heutigen IE-Status steht es derzeit ganz oben auf der Entwicklungsliste und erhält viele Stimmen. 

In der Zwischenzeit können wir einen anständigen Fallback hinzufügen, z. B. zusätzliche Anweisungen unter dem Download-Link für nicht unterstützte Browser. Dazu müssen Sie Modernizr mit der herunterladen Funktionstest enthalten.

Dann können wir das folgende Skript hinzufügen.

if (! Modernizr.adownload) var $ link = $ ('a'); $ link.each (function () var $ download = $ (this) .attr ('download'); if (typeof $ download! == typeof undefined && $ download! == false) var $ el = $ ( '
') .addClass (' Download-Anweisung '). Text (' Klicken Sie mit der rechten Maustaste und wählen Sie "Verknüpfte Datei herunterladen ''); $ el.insertAfter ($ (this)); );  

Das Skript prüft, ob der Browser das unterstützt herunterladen Attribut; Wenn nicht, wird ein neues angefügt 

 mit der Klasse für das Styling sowie den Anweisungstext und fügen Sie ihn unmittelbar unter einem Link ein, der mit der herunterladen Attribut.

Die Textanweisung wird in Safari angezeigt.

Einpacken

Das herunterladen Durch das Attribut wird die Handhabung von Download-Links für jeden, der keinen Zugriff auf die serverseitige Konfiguration hat, sehr bequem. Ich freue mich auf die Implementierung von Internet Explorer und Safari herunterladen Attribut bald!

Web-Design