js或者vue中怎么点击下载图片（图片是第三方的url）？

Question

如题：
需求是pc后台中，点击按钮下载对应的图片保存到本地，因为图片地址是第三方的url,如果使用标签会造成是打开新页面显示，而不是下载保存到本地，请问有没有其他办法？

附：
图片地址

http://qr.topscan.com/api.php?text=https://code.dddiancan.com/kc_code?tableId=24&storeId=4&appVersion=2

Answer 1

*{&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;margin:&nbsp;0; }img&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;500px; }.card{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;400px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;250px; }.card&nbsp;img{&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; }.card&nbsp;.down_btn_a&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;&nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute;&nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;40px;&nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;40px;&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#20b1aa;&nbsp;&nbsp;&nbsp;&nbsp;text-decoration:&nbsp;none;&nbsp;&nbsp;&nbsp;&nbsp;text-align:&nbsp;center;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#fff; }.card&nbsp;.down_btn_a:hover&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;background-color:&nbsp;#ccc;&nbsp;&nbsp;&nbsp;&nbsp;color:&nbsp;#000; }js 代码//判断是否为Trident内核浏览器(IE等)函数function&nbsp;browserIsIe()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!!window.ActiveXObject&nbsp;||&nbsp;"ActiveXObject"&nbsp;in&nbsp;window){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;else{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;} }//创建iframe并赋值的函数,传入参数为图片的src属性值.function&nbsp;createIframe(imgSrc)&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//如果隐藏的iframe不存在则创建 &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($("#IframeReportImg").length&nbsp;===&nbsp;0){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('<iframe&nbsp;style="display:none;"&nbsp;id="IframeReportImg"&nbsp;name="IframeReportImg"&nbsp;onload="downloadImg();"&nbsp;width="0"&nbsp;height="0"&nbsp;src="about:blank"></iframe>').appendTo("body"); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;//iframe的src属性如不指向图片地址,则手动修改,加载图片 &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($('#IframeReportImg').attr("src")&nbsp;!=&nbsp;imgSrc)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('#IframeReportImg').attr("src",imgSrc); &nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;else&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//如指向图片地址,直接调用下载方法 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;downloadImg(); &nbsp;&nbsp;&nbsp;&nbsp;} }//下载图片的函数function&nbsp;downloadImg()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//iframe的src属性不为空,调用execCommand(),保存图片 &nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;($('#IframeReportImg').src&nbsp;!=&nbsp;"about:blank")&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.frames["IframeReportImg"].document.execCommand("SaveAs"); &nbsp;&nbsp;&nbsp;&nbsp;} }//接下来进行事件绑定var&nbsp;aBtn&nbsp;=&nbsp;$(".card&nbsp;.down_btn_a");if&nbsp;(browserIsIe())&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;//是ie等,绑定事件 &nbsp;&nbsp;&nbsp;&nbsp;aBtn.on("click",&nbsp;function()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgSrc&nbsp;=&nbsp;$(this).siblings("img").attr("src");&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//调用创建iframe的函数 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createIframe(imgSrc); &nbsp;&nbsp;&nbsp;&nbsp;}); }&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;aBtn.each(function(i,v){&nbsp;&nbsp;&nbsp;&nbsp;//支持download,添加属性. &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;imgSrc&nbsp;=&nbsp;$(v).siblings("img").attr("src"); &nbsp;&nbsp;&nbsp;&nbsp;$(v).attr("download",imgSrc); &nbsp;&nbsp;&nbsp;&nbsp;$(v).attr("href",imgSrc); &nbsp;&nbsp;&nbsp;&nbsp;}) }支持 谷歌 火狐 IE8及以上