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

摘要

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

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

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

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

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

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

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

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

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

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

  1. <?php
  2.     $file = $_GET['file'];
  3.     header('Content-type: octet/stream');
  4.     header('Content-disposition: attachment; filename='.$file);
  5.     header('Content-Length: '.filesize($file));
  6.     readfile($file);
  7.     exit;
  8.  ?>

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

HTML代码如下:

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

可以试试:点击下载

特别提醒:

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

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

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

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: