html download tag

Question

Das Grundproblem ist das: Ich habe einen Link zu einer Bilddatei. Das gewünschte Verhalten, wenn ich auf den Link klicke, ist der Download-Dialog, mit dem ich einen zugehörigen Bild-Editor starten kann. Dies geschieht nicht, weil die Bilddatei vom Browser gerendert wird.

Gibt es irgendeine HTML-Magie, die ich verwenden kann, um den Browser zu zwingen, einen Download-Dialog anzubieten, wenn der Benutzer auf einen Link klickt?

Jede Hilfe oder Hinweise würden sehr geschätzt werden.

Answer 1

Zwei approachs:

1. Data URIs im href einen Anker-Tag verwenden:

   <a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAYAAADphp8SAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAOnAAADpwBB5RT3QAAABZ0RVh0Q3JlYXRpb24gVGltZQAwMi8yNS8xMapAVMwAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAABjklEQVQ4jZWTwWoTURSGv5lMp1OmxUIUXISCCbW06daNtGuh7uMbCHaeoOBSzBMEN92LXXThohVtoAshOyuKJQkaXWRjKi7aBjPT9v6uEsbpTGp/OHDPvf/5zjmLa0niCo0zWMODA2BZVqZTEkG1RdwhoLaxMKqTBJKWJO1JOpN0Iek8EQqeNxVXLP8jqS7pniXpe+1V9+yw058ft19yoqHKJb+9XikcOcDcYadvj4Mki+P68q1/F5hz4s1qGwsABNUWszMOD+7nWS75THk5wshw0DzhbeM3x/3zJG/CiWdBtTU6r63kuZ2f5NnmD8LI4Lk2TyoFHq7mefnm56XJMldaLE5T2+oSRgaAQWR4sdWlXJpO9WeCbvi5EWSoQWSYmkwvyQRdGOG5/z57rn0JfiWo8emY4FFhBPNcm/VKgQ/Nk1S/k3oLvN4/Ym31Jk8f38FzbQah4fPXU3be/8oEGSCXfBhEhu16j+16L6tXXKENfFwq+u3/caepXPLbwDsk3ZK0G/tr14lTSTuSin8BUMr8td343bwAAAAASUVORK5CYII=">Download</a>

2. In einigen bestimmten Browsern wie Google Chrome und Firefox, können Sie tun:

   <a download="image.jpg" href="http://www.domain.com/image.jpg">Download</a>

Answer 2

Nicht möglich nur mit HTML, aber Sie können die Datei zum Herunterladen zwingen, indem Sie Header mit einer serverseitigen Sprache wie PHP ändern.

// grab the requested file's name 
$file_name = $_GET['file']; 

// make sure it's a file before doing anything! 
if(is_file($file_name)) 
{ 

    /* 
     Do any processing you'd like here: 
     1. Increment a counter 
     2. Do something with the DB 
     3. Check user permissions 
     4. Anything you want! 
    */ 

    // required for IE 
    if(ini_get('zlib.output_compression')) { ini_set('zlib.output_compression', 'Off'); } 

    // get the file mime type using the file extension 
    switch(strtolower(substr(strrchr($file_name,'.'),1))) 
    { 
     case 'pdf': $mime = 'application/pdf'; break; 
     case 'zip': $mime = 'application/zip'; break; 
     case 'jpeg': 
     case 'jpg': $mime = 'image/jpg'; break; 
     default: $mime = 'application/force-download'; 
    } 
    header('Pragma: public'); // required 
    header('Expires: 0');  // no cache 
    header('Cache-Control: must-revalidate, post-check=0, pre-check=0'); 
    header('Last-Modified: '.gmdate ('D, d M Y H:i:s', filemtime ($file_name)).' GMT'); 
    header('Cache-Control: private',false); 
    header('Content-Type: '.$mime); 
    header('Content-Disposition: attachment; filename="'.basename($file_name).'"'); 
    header('Content-Transfer-Encoding: binary'); 
    header('Content-Length: '.filesize($file_name)); // provide file size 
    header('Connection: close'); 
    readfile($file_name);  // push it out 
    exit(); 

} 

Answer 3

, wenn Sie Download-Dialog zeigen möchten, müssen Sie spezielle Header, um das Bild zu setzen

in PHP wird es sein:

header('Content-Description: File Transfer'); 
header('Content-Type: application/octet-stream'); 
header('Content-Disposition: attachment; filename=image.jpg'); 
header('Content-Transfer-Encoding: binary'); 

Answer 4

Eine andere Lösung wäre dies in den eine .htaccess-Datei in dem Ordner mit Ihren Bildern:

AddType application/octet-stream .jpg