JS 实现图片下载_笔墨

你的地盘，你做主~

JS 实现图片下载

2020-07-06 11:00:23
笔墨
0
1378

#### js代码

var imageUrl = e.data.img;
	if (browserIsIe()) {
		//调用创建iframe的函数
		createIframe(imageUrl);
	} else {
		//创建原生a标签实现动态Img地址及下载触发
		var tempa = document.createElement('a');
		tempa.href = imageUrl;
		tempa.download = 'download';
		document.body.append(tempa);
		tempa.click();
		tempa.remove();
	}
#### 其中的两个方法

##### 1、判断是否为Trident内核浏览器(IE等)函数

function browserIsIe() {
		if (!!window.ActiveXObject || "ActiveXObject" in window) {
			return true;
		}
		else {
			return false;
		}
	}
##### 2.创建iframe并赋值的函数,传入参数为图片的src属性值.

function createIframe(imgSrc) {
		//如果隐藏的iframe不存在则创建
		if ($("#IframeReportImg").length === 0) {
			$('').appendTo("body");
		}
		//iframe的src属性如不指向图片地址,则手动修改,加载图片
		if ($('#IframeReportImg').attr("src") != imgSrc) {
			$('#IframeReportImg').attr("src", imgSrc);
		} else {
			//如指向图片地址,直接调用下载方法
			downloadImg();
		}
	}
##### 3.下载图片的函数

function downloadImg() {
		//iframe的src属性不为空,调用execCommand(),保存图片
		if ($('#IframeReportImg').src != "about:blank") {
			window.frames["IframeReportImg"].document.execCommand("SaveAs");
		}
	}

若是转载请注明出处

来源：笔墨博客(https://www.bimoor.com/index/Index/detail.html?id=49)

上一篇: 神似小哪吒-魔童降世于大唐芙蓉园...

下一篇: Git 仓库的创建和常用命令的使用...

抢沙发

全部留言

推荐图文 New Picture text

TP6集成 WorkerMan 以及 GatewayWorker 做实时聊天

2020-09-18

3327

好用的移动端时间选择插件rolldate

2020-07-27

1912

SEO简单优化处理

2020-08-06

1950

笔墨

暂无简介

42文章数
61855访问数
7点赞数

1粉丝数
5动态
50+排行

个人简介

暂无

暂无

暂无

未知

作者专栏

热点文章 News hots

查看更多

友情连接 Friend Links