兼容IE8图片下载

来源：互联网发布：mac大智慧交易软件编辑：程序博客网时间：2024/05/22 12:56

图片下载：（url返回的应该是图片数据，测试发现图片链接地址如xx/xx.jpg，不能完成下载；还不适合于多个iframe的页面；跨域的图片地址不能用window.open）

downloadImg( url,filename){if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < 0)) {var elemIF = document.createElement("iframe");elemIF.src = url;//文件路径elemIF.style.display = "none";document.body.appendChild(elemIF);}else {try {//html5中a标签有下载属性var $a=document.createElement('a');$a.setAttribute("href",url);$a.setAttribute("download",filename);var evObj = document.createEvent("MouseEvents");evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);$a.dispatchEvent(evObj);} catch (e) {}}}

IE8;如果url是图片链接地址，并且不是跨域的图片，就是工程和图片在同一个域下,可以用这个全局对象，使用的时候直接调用downPicObj.savepic(url);

var downPicObj={url:null,objIframe:null,pic:null,count:0,clear:function(){this.url=null;this.objIframe=null;this.pic=null;this.count=0;document.all.ieimgdown=null;},savepic:function(url){ if (document.all.ieimgdown == null) {  downPicObj.clear(); downPicObj.count++; if(url){ downPicObj.url=url; }  downPicObj.objIframe = document.createElement("IFRAME");  document.body.insertBefore(downPicObj.objIframe);  downPicObj.objIframe.outerHTML = "<iframe name='ieimgdown' style='display:none;' src=" + this.url + "></iframe>";  downPicObj.re = setTimeout("downPicObj.savepic()", 1)  if(downPicObj.count>3){ downPicObj.clear(); clearTimeout(downPicObj.re) ;  }} else { downPicObj.count=0;clearTimeout(downPicObj.re) ;downPicObj.pic = window.open(this.url, "ieimgdown") downPicObj.pic.document.execCommand("SaveAs") document.all.ieimgdown.removeNode(true) ;} }};

注：download

jQuery:

function download(src) {    var $a = $("<a></a>").attr("href", src).attr("download", "img.png");    $a[0].click();}

原生js:

function download(src) {    var $a = document.createElement('a');    $a.setAttribute("href", src);    $a.setAttribute("download", "");    var evObj = document.createEvent('MouseEvents');    evObj.initMouseEvent( 'click', true, true, window, 0, 0, 0, 0, 0, false, false, true, false, 0, null);    $a.dispatchEvent(evObj);};

如果后台返回的不是图片的具体地址，而是图片的数据流文件，返回时java端需设置header

response.setHeader("Content-disposition", "attachment; filename=" + new String("中文文件名".getBytes("utf-8"), "ISO8859-1"));

参考链接：http://1358440610-qq-com.iteye.com/blog/2105583

https://segmentfault.com/q/1010000004988831

0 0