原生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取上級兄弟節點,要注意標簽之間不能有空格,否則會出現未定義


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM