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

相关文章
|
5天前
|
Web App开发 前端开发 JavaScript
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
2015年,JavaScript之父Brendan Eich再次创业,推出Brave浏览器和加密货币Basic Attention Token(BAT),旨在颠覆传统广告行业。Brave屏蔽广告、保护隐私,加载速度快;BAT则通过奖励机制让用户、内容创作者和广告主三方受益。尽管面临用户习惯和巨头竞争的挑战,Brave已拥有超4000万月活跃用户,成为全球增长最快的隐私浏览器,引领Web3生态发展。
63 22
折腾之王:JavaScript之父Brave浏览器与BAT的诞生
|
1天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
44 33
|
22天前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
97 24
|
1月前
|
Linux Go iOS开发
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
本文介绍了如何在 VSCode 中禁用点击 Go 包名时自动打开浏览器跳转到 pkg.go.dev 的功能。通过将 gopls 的 `ui.navigation.importShortcut` 设置为 &quot;Definition&quot;,可以实现仅跳转到定义处而不打开链接。具体操作步骤包括:打开设置、搜索 gopls、编辑 settings.json 文件并保存更改,最后重启 VSCode 使设置生效。
55 7
怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev
|
1月前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
87 2
|
2月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
1月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
1月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
1月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
2月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。