HTML Download erzwingen klappt nicht?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
PC, Computer, Technik
16.02.2022, 19:22

Sofern du deine Webseite testest, ohne sie dafür über einen Webserver ausspielen zu lassen (in der Adresszeile hättest du folglich eine file:///-Adresse), wird dein Browser die Anzeige des Download-Dialogs verhindern.

Benutze für Tests also auch einen Webserver. Sei es der IIS (Windows), der Apache Server aus dem Softwarepaket XAMPP, ein einfacher Node.js-Server oder irgendein anderer.
FrozenArmy 
Fragesteller
 16.02.2022, 19:28

Ja, bei mir ist dann die file:///-Adresse, aber warum benötigt man dafür unbedingt einen Webserver?

0
regex9  16.02.2022, 19:35
@FrozenArmy

Browser richten sich hierbei oft nach der Same-origin-Policy. Das heißt, ein automatischer Download für eine Ressource (wie einem Bild) setzt voraus, dass es über dieselbe Domain erreichbar ist, wie die Webseite (bzw. dass die Bild-URL dieselbe Domain nutzt).

Wenn du ein HTML-Dokument über das file:///-Protokoll lädst, kann der Browser keine Domain bestimmen. Somit wird die obig erwähnte Bedingung auch nicht erfüllt.

Wenn du für die Anzeige deiner Webseite hingegen einen Webserver anrufst, hast du eine Adresse mit HTTP/S-Protokoll und erkennbarer Domain (z.B. http://localhost/).

1
FrozenArmy 
Fragesteller
 16.02.2022, 20:30
@regex9

Klappt leider jetzt auch mit localhost (über XAMPP) nicht, dasselbe wie sonst...

0
regex9  16.02.2022, 21:39
@FrozenArmy

Einmal zum Abgleich:

index.html:

<!doctype html>
<title>Example</title>
<a href="test.jpg" download>Download</a>

Sowohl Bilddatei als auch HTML-Datei liegen im Rootverzeichnis des Servers (Apache). Die URL wäre folglich http://localhost/index.html. Ich habe den Link in drei verschiedenen Browsern getestet: Chrome, Firefox, Brave. In jedem erhalte ich das Verhalten, welches ich erwarte. Das gilt im Übrigen auch für PNG-Dateien.

Es gibt aber auch noch einen anderen Lösungsweg, um den Download einer Datei zu erzwingen. Dazu benötigst du eine Webanwendung, die das Bild als Response liefert. Du könntest ein einfaches PHP-Skript benutzen.

<!doctype html>
<title>Example</title>
<a href="download.php">Download</a>

Für den Inhalt der download.php kannst du das Beispielskript aus der Dokumentation verwenden. Achte allerdings darauf, Um das Skript flexibler zu gestalten, könntest du den Request des Weiteren um einen Queryparameter erweitern. Dabei würde ich allerdings nur den Bildnamen weitergeben und den tatsächlichen Pfad intern zusammenbauen. Das heißt, alle herunterladbaren Bilder liegen in einem spezifischen Ordner.

download.php?image=Logo1.png

Im PHP-Skript:

if (empty($_GET['image'])) {
  http_response_code(404);
  exit;
}

if (!preg_match('/^[\w\-. ]+$/', $_GET['image'])) { 
  http_response_code(404);
  exit;
}

$name = "path/to/your/image/folder/" . $_GET['image'];

if (!file_exists($name)) {
  http_response_code(404);
  exit;
}

// now build the response ...

Die Namensprüfung für die Datei könnte man sicherlich noch modifizieren. Aktuell erlaubt sie nur Buchstaben des einfachen Alphabets (A-Z / a-z) und Zahlen.

1
FrozenArmy 
Fragesteller
 16.02.2022, 22:05
@regex9

Mmh...Klappt doch! Habe mich vertan mit dem Bild. Um alle Eventualitäten auszutesten habe ich als Download auch mal ein Quellcode eines Bildes in Betracht gezogen und habe beim localhost dann vergessen, den Quellcode durch meine Datei zu ersetzen.

Tut mir leid wegen deinen Mühen, deswegen nochmal besten Dank!

0