首先得引入jquery文件

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
目前最新版本的 jquery

其次 html代码段

<div class="box">
    <div class="card">
        <img id="testimg1" src="beauty.jpg"/>
        <a href="javascript:;" class="down_btn_a">点击下载</a>
    </div>
    <div class="card">
        <img id="testimg2" src="timg.jpg"/>
        <a href="javascript:;" class="down_btn_a">点击下载</a>
    </div>	
    <div class="card">
        <img id="testimg3" src="https://pic2.zhimg.com/v2-5ec052fff9d691c6a61654ed16440547_400x224.jpg"/>
        <a href="javascript:;" class="down_btn_a">点击下载</a>
    </div>		
</div>

Jquery代码

    <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>

最后css样式表

    <style>
    body{
    }
	*{
		padding: 0;
		margin: 0;
	}
	img {
	    display: block;
	    width: 500px;
	}
	.box{
		text-align: center;
		margin:0 auto;
		width: 820px;
		margin-top: 100px;
	}
	.card{
		display: inline-block;
		position: relative;
		width: 400px;
		height: 250px;
	}
	.card img{
		width: 100%;
	}
	.card .down_btn_a {
	    display: inline-block;
		position: absolute;
		right: 0;
		bottom: 0;
	    width: 100px;
	    height: 40px;
	    line-height: 40px;
	    background-color: #20b1aa;
	    text-decoration: none;
	    text-align: center;
	    color: #fff;
	}
	.card .down_btn_a:hover {
	    background-color: #ccc;
	    color: #000;
	}
    </style>

注:代码非原创,网络整理,亲测可用,整理分享

发表评论

共有 0 条评论