如何调用浏览器的下载功能（兼容各主流浏览器）

作者: 壬万er | 来源:发表于2017-09-19 10:29 被阅读610次

如何调用浏览器的下载功能（兼容各主流浏览器）
js图片上传预览兼容写法
我们到底需不需要 jQuery
我们到底需不需要 jQuery?
给文本框设置阴影 box-shadow
selenium+java启动不同浏览器的实现方法
浏览器兼容性问题
解决浏览器兼容性问题
主流浏览器内核一览
如何使用浏览器下载？

先放一张图

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>