href Bild Link Download auf Klick

179

Ich generiere normale Links wie: <a href="https://stackoverflow.com/path/to/image"><img src="/path/to/image" /></a>in einer Web-App.

Wenn ich auf den Link klicke, wird das Bild auf einer neuen Seite angezeigt. Wenn Sie das Bild speichern möchten, müssen Sie mit der rechten Maustaste darauf klicken und "Speichern unter" auswählen.

Ich möchte dieses Verhalten nicht, ich möchte, dass eine Download-Box herausspringt, wenn ich auf den Link klicke. Ist das nur mit HTML oder Javascript möglich? Wie?

Wenn nicht, müsste ich wohl ein download.php-Skript schreiben und es in die href mit dem Dateinamen als Parameter aufrufen ...?

Pierre
quelle
Hier ist eine einfache Möglichkeit, diese PHP-Klasse zu verwenden: tutorialchip.com/php-download-file-script
ven

Antworten:

238
<a download="custom-filename.jpg" href="/path/to/image" title="ImageName">
    <img alt="ImageName" src="/path/to/image">
</a>

Es wird noch nicht vollständig unterstützt http://caniuse.com/#feat=download , aber Sie können es mit modernizr https://modernizr.com/download/?adownload-setclasses ( unter Nicht-Kern-Erkennungen ) verwenden, um die Unterstützung von zu überprüfen der Browser.

Francisco Costa
quelle
2
Vielen Dank für Ihren Kommentar, es ist gut zu wissen. Obwohl Sie modernizr benötigen, verwende ich es jetzt in allen meinen Projekten, also ... Ich werde Ihre Antwort als neue Antwort akzeptieren
Pierre
1
Ich denke, Sie haben die Rolle von Modernizr hier möglicherweise falsch verstanden. Kurz gesagt, es werden keine fehlenden Funktionen hinzugefügt
bravokiloecho
@GauravManral Welche Nähte sind das Problem?
Francisco Costa
1
@GauravManral: IE unterstützt es nicht, wie in der Antwort erwähnt. Schauen Sie sich den bereitgestellten Caniuse-Link an.
Peirix
8
WICHTIG : Das downloadAttributattribut funktioniert nur für URLs gleichen Ursprungs . MDN Docs
Cespon
59

Der einfachste Weg, einen Download-Link für Bild oder HTML zu erstellen, ist das Festlegen des Download-Attributs . Diese Lösung funktioniert jedoch nur in modernen Browsern.

<a href="/path/to/image" download="myimage"><img src="/path/to/image" /></a>

"myimage" ist ein Name der herunterzuladenden Datei. Erweiterung wird automatisch hinzugefügt Beispiel hier

Aleksey Saatchi
quelle
Funktioniert dies für Windows Message Box? Ich habe es versucht, es scheint nicht zu funktionieren, aber vielleicht habe ich etwas falsch gemacht?!
Z77
48
<a href="download.php?file=path/<?=$row['file_name']?>">Download</a>

download.php:

<?php

$file = $_GET['file'];

download_file($file);

function download_file( $fullPath ){

  // Must be fresh start
  if( headers_sent() )
    die('Headers Sent');

  // Required for some browsers
  if(ini_get('zlib.output_compression'))
    ini_set('zlib.output_compression', 'Off');

  // File Exists?
  if( file_exists($fullPath) ){

    // Parse Info / Get Extension
    $fsize = filesize($fullPath);
    $path_parts = pathinfo($fullPath);
    $ext = strtolower($path_parts["extension"]);

    // Determine Content Type
    switch ($ext) {
      case "pdf": $ctype="application/pdf"; break;
      case "exe": $ctype="application/octet-stream"; break;
      case "zip": $ctype="application/zip"; break;
      case "doc": $ctype="application/msword"; break;
      case "xls": $ctype="application/vnd.ms-excel"; break;
      case "ppt": $ctype="application/vnd.ms-powerpoint"; break;
      case "gif": $ctype="image/gif"; break;
      case "png": $ctype="image/png"; break;
      case "jpeg":
      case "jpg": $ctype="image/jpg"; break;
      default: $ctype="application/force-download";
    }

    header("Pragma: public"); // required
    header("Expires: 0");
    header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
    header("Cache-Control: private",false); // required for certain browsers
    header("Content-Type: $ctype");
    header("Content-Disposition: attachment; filename=\"".basename($fullPath)."\";" );
    header("Content-Transfer-Encoding: binary");
    header("Content-Length: ".$fsize);
    ob_clean();
    flush();
    readfile( $fullPath );

  } else
    die('File Not Found');

}
?>
amir
quelle
17
Es gibt ein Sicherheitsproblem, sollte der Inhaltstyp "Anwendung / Download erzwingen" geschlossen sein! die alles herunterladen können, einschließlich Server PHP-Quelle!
CharlesB
3
@CharlesB ist richtig, dies würde es Ihnen ermöglichen, alles vom Server mithilfe der Verzeichnisdurchquerung herunterzuladen: <a href="download.php?file=../dbparams.inc>">Download</a>zum Beispiel. Weitere Infos hier: en.wikipedia.org/wiki/Directory_traversal_attack
OrganicPanda
@ CharlesB: Was ist dann der sicherste Weg ... außer der angekreuzten Antwort?
HIRA THAKUR
3
Um das Sicherheitsproblem zu umgehen, nehmen Sie keine absoluten oder relativen Pfadinformationen aus der Anforderung. Holen Sie sich nur den Dateinamen. Entfernen Sie den Pfad, z. B. mit $ file = pathInfo ($ _ GET ['file'], und stellen Sie den Pfad dann zusammen, indem Sie einen bekannten Pfad mit $ file ['basename'] anhängen. Wenn Sie Dateien aus verschiedenen Ordnern bereitstellen müssen, verwenden Sie Pfadtoken in Ihrer Anfrage, die Sie dann dem tatsächlichen Pfad in Ihrer Download-Funktion
Alexander233
1
Oder erstellen Sie eine Tabelle mit der Beziehung ID, Token, Pfad, rufen Sie das Token von der URL ab, überprüfen Sie den Pfad in der Datenbank und geben Sie diese Datei zurück. Das wäre sicherer. Aber offensichtlich komplizierter.
Felype
10

Nein, ist es nicht. Sie benötigen etwas auf dem Server, um einen Content-Disposition-Header zu senden und die Datei als Anhang festzulegen, anstatt inline zu sein. Sie können dies jedoch mit einer einfachen Apache-Konfiguration tun.

Ich habe ein Beispiel dafür gefunden, wie man es mit mod_rewrite macht , obwohl ich weiß, dass es einen einfacheren Weg gibt.

QUentin
quelle
6
Hey, du sagst: "obwohl ich weiß, dass es einen einfacheren Weg gibt" ... welcher? ^ _ ^
Pierre
Wenn ich die Details finden könnte, würde ich sie posten. Ich kann sie momentan nicht finden und habe nicht die Zeit, mich einer umfangreichen Suche zu widmen.
Quentin
1
Es ist in Ordnung, danke für Ihre Hilfe. Ich habe gerade eine PHP-Seite erstellt, die den Download generiert ...
Pierre
7

Versuche dies...

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>
edCoder
quelle
5

HTML-Download-Attribut, um anzugeben, dass das Ziel heruntergeladen wird, wenn ein Benutzer auf den Hyperlink klickt.

Dieses Attribut wird nur verwendet, wenn das href-Attribut festgelegt ist.

Der Wert des Attributs ist der Name der heruntergeladenen Datei. Es gibt keine Einschränkungen für zulässige Werte, und der Browser erkennt automatisch die richtige Dateierweiterung und fügt sie der Datei hinzu (.img, .pdf, .txt, .html usw.).

Beispielcode:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg"> Download Image >></a>

HTML5:

<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download> Download Image >></a>

Ausgabe :

Bild herunterladen >>

HTML5 herunterladen oder Chrome

Bild herunterladen >>

Rizo
quelle
1
Hey, danke für die Antwort. Einige Leute haben dies bereits vorgeschlagen, aber ich denke, es wird immer noch nicht vollständig unterstützt. Auf der anderen Seite funktioniert Ihr Download-Link bei Chrome nicht für mich
Pierre
Hey Pierre, versuchen Sie dies <a href=" w3schools.com/images/myw3schoolsimage.jpg "herunterladen> Bild herunterladen >> </a> danke
Rizo
4

Sie können es nicht mit reinem HTML / Javascript tun. Dies liegt daran, dass Sie eine separate Verbindung zum Webserver haben, um eine separate Datei (das Bild) abzurufen, und ein normaler Webserver die Datei mit festgelegten Inhaltsheadern bereitstellt, sodass der Browser, der den Inhaltstyp liest, entscheidet, dass der Typ intern verarbeitet werden kann.

Die Möglichkeit, den Browser zu zwingen, die Datei nicht intern zu verarbeiten, besteht darin, die Header (vorzugsweise Inhaltsdisposition oder Inhaltstyp) zu ändern, damit der Browser nicht versucht, die Datei intern zu behandeln. Sie können dies entweder tun, indem Sie ein Skript auf den Webserver schreiben, das die Header dynamisch setzt (z. B. download.php), oder indem Sie den Webserver so konfigurieren, dass verschiedene Header für die Datei zurückgegeben werden, die Sie herunterladen möchten. Sie können dies auf Verzeichnisbasis auf dem Webserver tun, sodass Sie ohne PHP oder Javascript davonkommen können - haben Sie einfach alle Ihre Download-Bilder an diesem einen Ort.

Colin Pickard
quelle
1
Nein. Über den Inhaltstyp zu lügen ist nicht der einzige Weg, dies zu erreichen. Siehe den HTTP-Antwortheader zur Inhaltsdisposition.
Quentin
4

Einfacher Code zum Herunterladen von Bildern mit einem Bild, das mit PHP klickt

<html>
<head>
    <title> Download-Button </title>
</head>
<body>
    <p> Click the image ! You can download! </p>
    <?php
    $image =  basename("http://localhost/sc/img/logo.png"); // you can here put the image path dynamically 
    //echo $image;
    ?>
    <a download="<?php echo $image; ?>" href="http://localhost/sc/img/logo.png" title="Logo title">
        <img alt="logo" src="http://localhost/sc/img/logo.png">
    </a>
</body>
Sashtha Manik
quelle
2

Bild herunterladen mit Bildklick!

Ich habe diesen einfachen Code gemacht! :)

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>
Sashtha Manik
quelle