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博客如需转载请紧急联系作者

相关文章
|
1天前
|
存储 前端开发 UED
HTML 属性新手注意点
在学习和使用HTML属性时,新手应注意以下几点,以确保代码的有效性和可维护性:1. 确保属性名称正确无误;2. 使用引号包围属性值;3. 避免内联样式,集中管理CSS;4. 使用语义化标签;5. 添加`alt`和`title`属性提高可访问性;6. 避免重复的ID;7. 利用`data-*`属性存储自定义数据;8. 测试属性在各浏览器中的兼容性;9. 合理使用`target`属性,注意安全;10. 保持代码简洁。遵循这些注意事项,有助于编写高质量的HTML代码。
|
13天前
HTML标记 和标记的属性
【8月更文挑战第28天】HTML标记 和标记的属性。
19 1
|
14天前
HTML元素(HTML Elements)的属性
【8月更文挑战第27天】HTML元素(HTML Elements)的属性。
23 2
|
15天前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
37 1
|
18天前
|
移动开发 HTML5
HTML5页面元素及属性
【8月更文挑战第23天】HTML5页面元素及属性。
31 4
|
16天前
首页轮播点击展开详细说明html源码
首页轮播点击展开详细说明html源码,微信读书首页轮播源码,通过点击页面左右的箭头来切换不同的图片文字内容,图片为宽屏全屏的样式且有一个模糊的效果,文字的加载有一个时间顺序,有些类似于懒加载,整个页面是响应式的效果非常棒。
19 0
首页轮播点击展开详细说明html源码
|
9天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
34 0
|
9天前
|
移动开发 前端开发 JavaScript
前端表单验证的完美攻略:HTML5属性与JavaScript方法的无缝对接,让你的Web应用数据输入既安全又优雅
【8月更文挑战第31天】本文介绍前端表单验证的重要性及其实现方法,利用HTML5的内置属性如`required`、`pattern`和`minlength`进行基本验证,并借助JavaScript处理复杂逻辑,如密码确认。通过示例代码详细展示了如何结合两者实现高效且友好的表单验证,同时使用CSS增强用户体验。此方法简化开发流程并提升验证效果。
17 0
|
16天前
|
移动开发 前端开发 JavaScript
HTML5 中 `id` 属性和 `class` 属性的区别
【8月更文挑战第24天】
12 0
|
19天前
|
人工智能 前端开发 UED
1分钟解锁属性:HTML中的列表标签属性
1分钟解锁属性:HTML中的列表标签属性

相关实验场景

更多
下一篇
DDNS