图片下载:(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"));
https://segmentfault.com/q/1010000004988831