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

简介:

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


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

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

3.代码如下:

(1)HTML部分



  
  
  1. <div id="down">
  2. <a id="downLoad">Click Me! </a>
  3. </div>

(2.)js部分



  
  
  1. //①判断浏览器类型
  2. function myBrowser() {
  3. var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  4. var isOpera = userAgent.indexOf( "Opera") > -1;
  5. if(isOpera) {
  6. return "Opera"
  7. }; //判断是否Opera浏览器
  8. if(userAgent.indexOf( "Firefox") > -1) {
  9. return "FF";
  10. } //判断是否Firefox浏览器
  11. if(userAgent.indexOf( "Chrome") > -1) {
  12. return "Chrome";
  13. }
  14. if(userAgent.indexOf( "Safari") > -1) {
  15. return "Safari";
  16. } //判断是否Safari浏览器
  17. if(userAgent.indexOf( "compatible") > -1 && userAgent.indexOf( "MSIE") > -1 && !isOpera) {
  18. return "IE";
  19. }; //判断是否IE浏览器
  20. if(userAgent.indexOf( "Trident") > -1) {
  21. return "Edge";
  22. } //判断是否Edge浏览器
  23. }
  24. //②IE浏览器图片保存(IE其实用的就是window.open)
  25. function SaveAs5(imgURL) {
  26. var oPop = window.open(imgURL, "", "width=1, height=1, top=5000, left=5000");
  27. for(; oPop.document.readyState != "complete";) {
  28. if(oPop.document.readyState == "complete") break;
  29. }
  30. oPop.document.execCommand( "SaveAs");
  31. oPop.close();
  32. }
  33. //③下载函数(区分IE和非IE部分)
  34. function oDownLoad(url) {
  35. if(myBrowser() === "IE" || myBrowser() === "Edge") {
  36. //IE (浏览器)
  37. SaveAs5(url);
  38. console.log( 1)
  39. } else {
  40. //!IE (非IE)
  41. odownLoad.href = url;
  42. odownLoad.download = "";
  43. }
  44. }
  45. //④点击事件下载(只需更改图片路径即可)
  46. var odownLoad = document.getElementById( "downLoad");
  47. odownLoad.onclick = function() {
  48. oDownLoad( "1.jpg")
  49. }

4.做如下几点说明:

(1) 360急速模式下


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


(3)Firefox


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


(4)Chrome


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

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

原文作者:hangGe0111

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

相关文章
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
966 156
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM(浏览器对象模型)
总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
426 23
|
Web App开发 前端开发 JavaScript
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
2015年,JavaScript之父Brendan Eich再次创业,推出Brave浏览器和加密货币Basic Attention Token(BAT),旨在颠覆传统广告行业。Brave屏蔽广告、保护隐私,加载速度快;BAT则通过奖励机制让用户、内容创作者和广告主三方受益。尽管面临用户习惯和巨头竞争的挑战,Brave已拥有超4000万月活跃用户,成为全球增长最快的隐私浏览器,引领Web3生态发展。
652 22
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
493 63
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
521 58
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
507 2
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
455 3
|
前端开发 JavaScript Android开发
JavaScript 网页链接调用Android程序
如何让网页链接实现启动Android的应用,网上有说重写WebView相关的shouldOverrideUrlLoading方法,但是这种理论上能实现,因为你的网页不是仅仅被你自己的webview来浏览,你需要做的是让市面上的浏览器支持才行。
1238 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
505 2