先放一張圖
image.png
CSS部分
<html lang="en">
<head>
<meta charset="UTF-8">
<title>調用瀏覽器下載功能（兼容各主流瀏覽器）</title>
</head>
<style>
img#downImg {
display: none;
}
</style>
<body>
<div id="down">
<a id="downLoad">點我下載圖片</a>
</div>
</body>
</html>
JS部分
<script>
//判斷瀏覽器類型
function myBrowser(){
//取得瀏覽器的userAgent字符串
var userAgent = navigator.userAgent;
var isOpera = userAgent.indexOf("Opera") > -1;
//判斷是否Opera瀏覽器
if (isOpera) {
return "Opera"
};
//判斷是否Firefox瀏覽器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
}
//判斷是否Chrome瀏覽器
if (userAgent.indexOf("Chrome") > -1){
return "Chrome";
}
//判斷是否Safari瀏覽器
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
}
//判斷是否IE瀏覽器
if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
return "IE";
};
//判斷是否Edge瀏覽器
if (userAgent.indexOf("Trident") > -1) {
return "Edge";
}
}
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 oDownLoad(url) {
myBrowser();
if (myBrowser()==="IE"||myBrowser()==="Edge"){
//IE
ele.href="#";
var oImg=document.createElement("img");
oImg.src=url;
oImg.id="downImg";
var odown=document.getElementById("down");
odown.appendChild(oImg);
SaveAs5(document.getElementById('downImg').src)
}else{
//!IE
ele.href=url;
ele.download="";
}
}
var ele=document.getElementById("downLoad");
ele.onclick=function () {
oDownLoad("img/77.jpg")
}
</script>
