Geek Answers Handbook

Tags for downloading html

The main problem is this: I have a link to an image file. The desired behavior when I click on the link is to get a download dialog that will allow me to launch the linked image editor. This does not happen because the image file is displayed by the browser.

Is there any html magic I can use to get the browser to offer a download dialog when the user clicks on the link?

Any help or pointers would be greatly appreciated.

+6
html
source share
4 answers

Two approaches:

  • Using the data URI in the href binding tag:

    <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>

  • In some browsers, such as Google Chrome and Firefox, you can:

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

+3
source share

It is not possible to use only HTML, but you can force the file to be downloaded by modifying the headers in a server-side language, such as PHP.

 // grab the requested file name $file_name = $_GET['file']; // make sure it 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 MYH: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(); }
0
source share

if you want to display the download dialog you need to add special headers to your image

in PHP it will be:

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

Another solution would be to add this to the htaccess file in the folder with your images:

AddType application/octet-stream .jpg

-one
source share

More articles:


All Articles