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>下载的。

原文发布时间:2018-6-19

原文作者:hangGe0111

本文来源csdn博客如需转载请紧急联系作者

相关文章
|
13天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
16 0
|
14天前
|
JavaScript 前端开发 安全
JavaScript与浏览器的执行平台有何不同?
【4月更文挑战第22天】JavaScript与浏览器的执行平台有何不同?
20 2
|
14天前
|
存储 移动开发 JavaScript
JavaScript和浏览器
【4月更文挑战第22天】JavaScript和浏览器
19 4
|
1天前
|
JavaScript 前端开发 开发者
JavaScript基础入门之浏览器控制台调试输出
本文章是对小白学习js的初级教程,也是我对自己学习经验的一种总结,文章大多采用使用案例加讲解,带动学习的方式.因为我们的天性总是喜欢有及时反馈的事物,但是学习是一个慢长的事情,而有结果的回应,才会更好的促进自己去学习,主要是对于javascript学习中的输出,有个大体上的了解,同时通过教学能够更好的使用浏览器来方便我们去学习和运行代码,也是对自己进行笔记整理,对抓住信息关键点的一种提高.
10 0
|
5天前
|
前端开发 UED 开发者
【专栏:HTML与CSS实战项目篇】制作一个响应式图片画廊
【4月更文挑战第30天】本文介绍了如何使用HTML和CSS创建响应式图片画廊。响应式画廊能根据用户设备屏幕大小自动调整布局。首先规划结构,包含一个图片容器和每张图片元素,并为图片提供替代文本。接着设计样式,设置图片大小、间距和视觉效果。然后通过媒体查询实现响应式设计,根据不同屏幕尺寸调整图片排列。同时考虑性能优化,如压缩图片和使用懒加载技术。最后,测试和调试确保画廊在各种设备上正常工作。这个过程强调了响应式设计和用户体验的重要性。
|
6天前
|
前端开发 JavaScript
浏览器通过构建DOM树来解析HTML代码
【4月更文挑战第30天】浏览器通过构建DOM树来解析HTML代码
20 1
|
11天前
在线拼接图片工具HTML源码
在线将多张图片拼接成一张图片,多图合一并导出下载。 无需本地安装软件。 下载时,使用日期时间作为文件名, 规避图片文件名相同造成的覆盖问题;也能省去一部覆盖确认操作 多语言支持
11 0
在线拼接图片工具HTML源码
|
13天前
|
JavaScript
js Array map映射对象多个属性
js Array map映射对象多个属性
5 0
|
16天前
|
存储 JavaScript 前端开发
js的基本属性
【4月更文挑战第20天】js的基本属性
21 8
|
17天前
鼠标点击效果.html(网上收集6)
鼠标点击效果.html(网上收集6)

热门文章

最新文章

相关实验场景

更多