原生js实现点击下载图片

Posted 2020-11-21 夜冷霜星

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

<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取上级兄弟节点，要注意标签之间不能有空格，否则会出现未定义