JS实现文件下载(适应多种浏览器)

最新推荐文章于 2025-10-21 17:31:21 发布

原创最新推荐文章于 2025-10-21 17:31:21 发布 · 2.2w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#文件下载 #javascript #浏览器适应

日常积累专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的跨浏览器文件下载方法。该方法通过不同的技术路线适配IE/Edge和其他现代浏览器，如Chrome、Firefox等。对于IE/Edge，采用弹窗方式触发文件保存对话框；对于非IE浏览器，则利用HTML5新增的download属性来实现。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS实现文件上传下载</title>
</head>
<body>
<a href="javascript:void(0);" id="oDownLoad" onclick="oDownLoad('1.pdf','oDownLoad')">下载</a>
</body>
<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浏览器
    }

    function oDownLoad(url,id) {
        if (myBrowser()==="IE" || myBrowser()==="Edge"){
            var oPop = window.open(url,"","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();
        }else{
            //!IE
            var odownLoad=document.getElementById(id);
            odownLoad.href=url;
            odownLoad.download="";
        }
    }
</script>
</html>