如何通过a链接实现图片下载

本文转载自：萧萧寒 http://www.xiaoxiaohan.com/php/3.html

需求

在做项目的过程中，产品那边出于用户体验方面的考虑提出如下需求：用户通过点击一个按钮，直接弹出浏览器的下载保存窗口供用户下载自己的推广二维码。

当这个需求传达到技术部的时候，笔者第一个想到的方法就是通过a链接实现，因为网站的下载操作多数都是通过a链接实现的。

测试一：给a链接一张图片的绝对路径

试着把自己的代码编写到网页中并用浏览器打开，尝试了多个不同的浏览器，结果出其的一致：点击a链接之后出现的是图片预览，而不是期望中的下载保存窗口。

测试二：给a链接一张图片的相对路径

再次把自己的代码编写到网页中并用浏览器打开，同样尝试了多个不同的浏览器，和测试一不同的是：点击a链接之后火狐和谷歌浏览器可以直接弹出浏览器的下载保存窗口，而其它的一些浏览器如：IE、Safari等则是实现图片预览。

对于这样的结果，让人有点意外。网上搜索得知：浏览器会通过头信息进行判断，一旦没有找到头信息浏览器则根据自己的既定规则进行解析。如果浏览器能识别该文件，则会以相应的方式显示该文件；如果浏览器不能识别该文件，则会弹出下载保存窗口供用户进行下载保存。

为了达到浏览器兼容的目的，结合网站后台使用的语言，最终决定借助PHP实现，代码如下：

<?php
    $file = $_GET['file'];
    header('Content-type: octet/stream');
    header('Content-disposition: attachment; filename='.$file.';');
    header('Content-Length: '.filesize($file));
    readfile($file);
    exit;
 ?>

将上面这段代码粘贴到新建的PHP文件中保存并命名为download.php以供HTML页面使用。然后，我们就可以在HTML代码中调用这个PHP文件实现点击a链接下载图片的操作了。

HTML代码如下：

<a href="download.php?file=demo.jpg">点击下载</a>

可以试试：点击下载

特别提醒：

1、写HTML代码的时候，一定要注意PHP文件的路径并保证你的服务器能够解析PHP文件；

2、建议下载路径采用相对路径，这样可以保证图片名字的初始化，使用绝对路径可能会出现图片下载完成后打不开等情况。

对于a链接直接引用图片相对路径和绝对路径点击之后浏览器表现不一致，笔者不是很了解其中的原委。如果你知道，欢迎留言解惑。