HTML里的a链接download 属性浏览器js点击下载图片

1.<a>download下载图片具有兼容性

所以需做兼容处理，使其兼容IE，就比较完美了。

2.最近有这方面的需求，从网上看了一些资料，拿过来不能直接使用，把他们整合了一下，作为笔记，方便自己以后使用，现在IE，Firefox,Chrome都可以用了。

3.代码如下：

(1)HTML部分

<div id="down"><a id="downLoad">Click Me!</a>
</div>

(2.)js部分

//①判断浏览器类型
function myBrowser() {var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串var isOpera = userAgent.indexOf("Opera") > -1;if(isOpera) {return "Opera"}; //判断是否Opera浏览器if(userAgent.indexOf("Firefox") > -1) {return "FF";} //判断是否Firefox浏览器if(userAgent.indexOf("Chrome") > -1) {return "Chrome";}if(userAgent.indexOf("Safari") > -1) {return "Safari";} //判断是否Safari浏览器if(userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {return "IE";}; //判断是否IE浏览器if(userAgent.indexOf("Trident") > -1) {return "Edge";} //判断是否Edge浏览器
}//②IE浏览器图片保存（IE其实用的就是window.open)
function SaveAs5(imgURL) {var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");for(; oPop.document.readyState != "complete";) {if(oPop.document.readyState == "complete") break;}oPop.document.execCommand("SaveAs");oPop.close();
}//③下载函数（区分IE和非IE部分）function oDownLoad(url) {if(myBrowser() === "IE" || myBrowser() === "Edge") {//IE （浏览器）SaveAs5(url);console.log(1)} else {//!IE (非IE)odownLoad.href = url;odownLoad.download = "";}}//④点击事件下载（只需更改图片路径即可）var odownLoad = document.getElementById("downLoad");
odownLoad.onclick = function() {oDownLoad("1.jpg")}

4.做如下几点说明：

(1) 360急速模式下

(2) 360兼容模式(相当于IE状态)

（3）Firefox

在火狐中保存的图片可以在（计算机=>下载中找到)。

（4）Chrome

点击就直接下载了，就是使用<a href="1.jpg" download=""></a>下载的。

HTML里的a链接download 属性浏览器js点击下载图片相关推荐

JS实现浏览器点击下载图片
点击下载图片分两种: 1.一种是同源地址图片(也就是本地本项目中的图片): 2.另一种是不同源的图片:(不同域名下,比如阿里云七牛云上的图片) 下面我们就具体说一下这两种图片下载的方式: 第一种(同 ...
PC端微信浏览器js点击事件失效
**电脑端微信浏览器js点击事件失效**前段时间发现开发的一个微信公众号上一个按钮的点击事件在手机上是正常的,电脑端手机微信里却不起作用.在网上找了好久都没有找到解决办法.后来查看其它的页面的同样的点 ...
微信链接跳转浏览器 H5实现APP下载功能实现方法
由于微信的限制,应用文件在内置浏览器中下载全部被屏蔽掉,造成很多人用微信扫描二维码下载时点击下载按钮没反应,我想到的是做一个提示用户在浏览器中打开下载. 可以参考:微信打开网址添加在浏览器中打开提示 ...
文件链接在google浏览器无法打开或下载
链接不是HTTPS的,认为不安全,替换成https就可以了 // 打开或下载文件 function openFile(extension,file_url){let replace = file_ur ...
js实现a标签点击下载图片和txt等文件，而不是浏览器打开预览
function downloadFile(url) {console.log(url)const link = document.createElement('a')fetch(url).then( ...
IE浏览器下点击下载文件没反应
今天测试系统中的文件下载时,点击文件下载后,浏览器没反应,在网上找了下原因是IE的临时文件夹目录没有了,设置一下即可. 方法如下: 设置下IE的临时文件夹即可
HTML+JS实现浏览器下载图片（可以下载第三方链接的图片）
如果使用a标签指向一个图片的话,你会发现点击链接时它会直接在浏览器中打开图片并显示: <a href="http://www.baidu.com/img/baidu_jgylogo3. ...
微信内浏览器不支持下载APK文件的解决方案微信中点击链接调用外部浏览器打开
需求:在微信h5页面中下载第三方app -- 安卓, 直接下载apk文件包:iphone,跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX ...
属性浏览器控件QtTreePropertyBrowser编译成动态库(设计师插件)
文章目录一.回顾二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档三.设计师插件编译 1.重写QDesignerCustomWidget ...

HTML里的a链接download 属性浏览器js点击下载图片

HTML里的a链接download 属性浏览器js点击下载图片相关推荐

最新文章

热门文章