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

相关文章
|
18天前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
8月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
147 1
|
6月前
|
移动开发 JavaScript 前端开发
【Html.js——图片折叠效果】折叠手风琴(蓝桥杯真题-1763)【合集】
本项目实现了一个图片折叠手风琴效果,使用jQuery完成。主要包括以下部分: - **介绍**:任务是通过点击图片实现折叠和展开的效果。 - **准备**:内置初始代码,包含 `css/style.css`、`images/` 文件夹、`js/` 文件夹及 `index.html` 等文件。启动 Web Server 服务可运行项目。 - **目标**:完善 `index.js` 文件,使页面达到预期的折叠效果。 - **规定**:严格按步骤操作,保持默认文件结构不变,并在完成后保持 Web 服务正常访问状态。 - **通关代码**:使用 jQuery 实现点击事件,为选中元素添加 `act
79 19
|
7月前
|
JavaScript 容器
带方向感知功能的js图片遮罩层插件
带方向感知功能的js图片遮罩层插件
|
8月前
|
移动开发 HTML5
HTML5 表单属性3
`&lt;input&gt;` 标签的 `formaction`、`formenctype` 和 `formmethod` 属性分别用于指定表单提交的 URL 地址、数据编码类型和提交方法,这些属性可覆盖 `&lt;form&gt;` 标签中的相应属性,并且主要适用于 `type=&quot;submit&quot;` 和 `type=&quot;image&quot;` 的输入类型。
|
7月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性7
`pattern` 属性使用正则表达式验证 `&lt;input&gt;` 元素的值,适用于 `text`, `search`, `url`, `tel`, `email`, 和 `password` 类型。
|
7月前
|
移动开发 UED HTML5
HTML5 表单属性6
`min`、`max` 和 `step` 属性用于限制 `&lt;input&gt;` 标签中的数值或日期范围。例如,可以设置日期选择器的最早和最晚日期,或限制数字输入框的值范围。`multiple` 属性允许在 `&lt;input&gt;` 中选择多个值,适用于邮箱和文件类型。这些属性增强了表单控件的功能性和用户体验。
|
8月前
|
移动开发 HTML5
HTML5 表单属性4
`formnovalidate` 属性是一个布尔属性,用于 `&lt;input&gt;` 元素,指示该输入在表单提交时不需验证,可覆盖 `&lt;form&gt;` 元素的 `novalidate` 属性,常与 `type=&quot;submit&quot;` 一起使用。示例中展示了如何通过两个提交按钮(一个使用验证,另一个不使用)实现不同的表单提交方式。
|
7月前
|
移动开发 HTML5
HTML5 表单属性5
`height` 和 `width` 属性用于 `&lt;input&gt;` 标签中的 `image` 类型,定义图像的高度和宽度。
|
8月前
|
移动开发 JavaScript 前端开发
HTML5 表单属性2
`novalidate` 是 HTML `&lt;form&gt;` 元素的布尔属性,用于禁用浏览器的默认表单验证功能。当此属性存在时,浏览器不会检查表单字段是否符合预设的验证规则,允许开发者通过 JavaScript 等手段自定义验证逻辑。

热门文章

最新文章