分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 代码编程

原生js实现点击下载图片

发布时间:2023-09-06 02:02责任编辑:赖小花关键词:js

点击下载,则可下载上级兄弟节点

<div class="form-group"> ?????<div> ??????????<h3>申请人信息</h3> ??????????<div class="sq_info"> ????????????????<ul> ?????????????????????<li><span>姓名:</span><p>张三</p></li> ?????????????????????<li><span>姓名:</span><p>张三</p></li> ?????????????????????<li><span>本人照片:</span><img src="http://pic.pptbz.com/201506/2015070581208537.JPG" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li> ?????????????????????<li><span>护照首页:</span><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=302701032,2300144492&fm=27&gp=0.jpg" alt=""><a href="javascript:void(0);" onclick="down_img(this)">点击下载</a></li> ??????????????????????<li><span>价格:</span><p class="price">500元</p></li> ???????????????????</ul> ??????????????</div> ?????????</div> ????<div>
<script>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();}//④点击事件下载(只需更改图片路径即可)function down_img(a){var osb = a;var sb = a.previousSibling.src;// console.log(sb)if(myBrowser() === "IE" || myBrowser() === "Edge") {//IE (浏览器)SaveAs5(sb);} else {//!IE (非IE)osb.href = sb;osb.download = "";}}</script>

注意:previousSibling取上级兄弟节点,要注意标签之间不能有空格,否则会出现未定义

原生js实现点击下载图片

原文地址:https://www.cnblogs.com/xiaokele1314/p/9262632.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved