PDFs als Link zum Download anbieten

Wir können für den Besucher eine Datei wie Beispielsweise ein PDF-Dokument auf unserer Website anbieten. Technisch ist dies nichts anderes wie ein Link. Im Kurs wird der Spickzettel über alle Befehle als PDF unter der URL https://www.html-seminar.de/downloads/html5-css-referenz.pdf angeboten.

Als HTML-Befehl wird dazu auf der Website einfach ein Link integriert:

<a href="html5-css-referenz.pdf">HTML Referenz als PDF</a>

Liegt nun die PDF-Datei im Verzeichnis von der HTML-Datei und klickt der Besucher auf den Link gibt es 2 Mögliche Varianten, wie der Browser die Datei behandelt:

  • sie wird direkt im Browser angezeigt
  • der Download für diese PDF-Datei startet

Meistens wird der erste Fall passieren. Wie wir einen Download „erzwingen“ können, kommt später noch.

Ordnung verhindert Chaos

Sinnvoll ist von Anfang an, für die entsprechende Dateien passende Ordner anzulegen und die Dateien dort zu speichern. Für unsere PDF-Datei könnten wir einen Ordner „pdf“ erstellen, wenn wir mehrere PDF-Dateien haben. Haben wir verschiedene Dateien, die wir zum Download anbieten, dann können wir auch einen Ordner mit dem Namen „downloads“ anlegen. Im folgenden Beispiel gehen wir davon aus, dass die Datei im Ordner „downloads“ in unserem Verzeichnis, wo unsere HTML-Datei liegt, gespeichert ist. Somit muss die Pfadangabe auch vor unserer Dateiangabe im HTML-Befehl aufgenommen werden.

<a href="downloads/html5-css-referenz.pdf">HTML Referenz als PDF</a>

Bitte daran denken, dass auch hier die Anzeige für den Besucher eindeutig ist - im Beispiel bekommt der Besucher als Linkbeschreibung „HTML-Referenz als PDF“ angezeigt. Bitte keinesfalls es sich einfach machen und solche Worthülsen schreiben wie: „Zum Download klicken Sie hier“.

Amüsantes aus der Welt des Internets. Man kann sich immer fragen, wer bei welchem Wort bei einer Suchmaschinenabfrage gewinnt. Überlegen Sie kurz, wer den Platz 1 für das Wort „hier“ bei den organischen Suchindex bei Google hat.

Wenn fertig überlegt - es ist Adobe mit seinem Acrobat Reader. Warum? Ganz einfach. Viele Webseiten bieten PDF-Downloads an und schreiben dann noch zusätzlich „Um das Dokument anzuzeigen, benötigen Sie den Acrobat Reader. Zum Download des Programms klicken Sie hier“. Das Wort „hier“ ist mit der entsprechenden Unterseite von Adobe verlinkt. Einfach selber klicken. Mit dem folgenden Link kommen Sie direkt zur Suchabfrage von Google mit dem Wort hier.

PDF als Download erzwingen

Soll auf jeden Fall nicht der Browser entscheiden, was er mit der Datei macht sondern dem Besucher ein Download angeboten werden, dann funktioniert das über ein relativ neues HTML5-Attribut „download“.

Unser Beispiel würde also wie folgt aussehen (der Übersicht halber in mehrere Zeilen aufgeteilt):

<a 
  href="downloads/html5-css-referenz.pdf"
  download
>HTML Referenz als PDF</a>

Möchte man noch einen anderen Dateinamen als das Original mitgeben, wird das Attribut „download“ mit dem Attributwert ergänzt. Im folgenden wird dem Nutzer als Dateiname dann „html5-css-referenz-vom-html-seminar-de.pdf“ vorgeschlagen.

Dies klappt beispielsweise auch für die meisten Dateiendungen wie bei Bildern „.jpg“ und Texten „.txt“.

<a 
  href="downloads/html5-css-referenz.pdf"
  download="html5-css-referenz-vom-html-seminar-de.pdf"
>HTML Referenz als PDF</a>

Und nun zum direkt selber testen: HTML Referenz als PDF

Das Attribut „download“ wird bei Chrome ab Version 14, bei Firefox ab Version 20 und beim IE ab Version 13 unterstützt.