jquery实现下载图片

最新推荐文章于 2025-07-02 09:13:14 发布

岁月如歌_

最新推荐文章于 2025-07-02 09:13:14 发布

阅读量1.3w

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery javascript vue.js

本文链接：https://blog.csdn.net/namechenfl/article/details/85161498

jquery 专栏收录该内容

6 篇文章

订阅专栏

该博客内容展示了如何使用JavaScript来检测浏览器类型，并根据浏览器特性实现图片的下载功能。对于IE浏览器，通过创建隐藏的iframe并加载图片来触发下载；对于非IE浏览器，利用`download`属性直接下载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
    </style>
</head>

<body>
	<div class="box">
		<div class="card">
			<img id="testimg1" src="./img/a.jpg"/>
			<a href="javascript:;" class="down_btn_a">点击下载</a>
		</div>
	</div>

	
    <script>
	//判断是否为Trident内核浏览器(IE等)函数
	function browserIsIe() {
	    if (!!window.ActiveXObject || "ActiveXObject" in window){
	        return true;
	    }
	    else{
	        return false;
	    }
	}
	//创建iframe并赋值的函数,传入参数为图片的src属性值.
	function createIframe(imgSrc) {
	    //如果隐藏的iframe不存在则创建
	    if ($("#IframeReportImg").length === 0){
	        $('<iframe style="display:none;" id="IframeReportImg" name="IframeReportImg" onload="downloadImg();" width="0" height="0" src="about:blank"></iframe>').appendTo("body");
	    }
	    //iframe的src属性如不指向图片地址,则手动修改,加载图片
	    if ($('#IframeReportImg').attr("src") != imgSrc) {
	        $('#IframeReportImg').attr("src",imgSrc);
	    } else {
	        //如指向图片地址,直接调用下载方法
	        downloadImg();
	    }
	}
	//下载图片的函数
	function downloadImg() {
		//iframe的src属性不为空,调用execCommand(),保存图片
	    if ($('#IframeReportImg').src != "about:blank") {
	        window.frames["IframeReportImg"].document.execCommand("SaveAs");
	    }
	}
	//接下来进行事件绑定
		var aBtn = $(".card .down_btn_a");
	if (browserIsIe()) {
		//是ie等,绑定事件
	    aBtn.on("click", function() {
	    	var imgSrc = $(this).siblings("img").attr("src");
	    	//调用创建iframe的函数
	        createIframe(imgSrc);
	    });
	} else {
		aBtn.each(function(i,v){
			//支持download,添加属性.
			var imgSrc = $(v).siblings("img").attr("src");
			$(v).attr("download",imgSrc);
			$(v).attr("href",imgSrc);
		})
	}
    </script>
</body>

</html>