登录  /  注册
首页 > web前端 > js教程 > 正文

js文件下载及命名

巴扎黑
发布: 2017-06-26 15:03:58
原创
1741人浏览过
js文件下载 ; 文件下载方法 ; IE中文件下载的方法 ; 使用IE下载 ; 文件下载兼容性 ; a标签下载 ; 浏览器下载

函数功能:实现主流浏览器的文件下载功能;

兼容性: >=IE10,Edge,chrome,firefox;

与后台的请求方式:GET请求,  url携带参数  url?id=123(隐藏文件真实路径);

实现下载功能的前提是判断出浏览器类型:

       browserType: function(){var userAgent = navigator.userAgent.toLowerCase();// Figure out what browser is being usedvar testCenter = {
                ie:function isIE() { //ie?if (!!window.ActiveXObject || "ActiveXObject" in window)return true;elsereturn false;
                },
                edge : ()=>{ return /dge/.test(userAgent) },
                chrome:()=>{ return /chrome/.test(userAgent)},
                safari: ()=>{  return /safari/.test(userAgent)&&!(/chrome/.test(userAgent))},
                opera: ()=>{  return  /opera/.test(userAgent) } ,
                msie: ()=>{  return /msie/.test(userAgent) && !/opera/.test(userAgent) },
                mozilla: ()=>{  return /mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent) }
            };var browserObj = {};for(var k in testCenter){var result = testCenter[k]();var version = (userAgent.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [])[1];if(result){
                    browserObj.browser = k;
                    browserObj.version = version;return browserObj;
                }
            }
        },
登录后复制
View Code

下载函数定义:如下

dlFile : function(options) {var that = this;var url = options.url;
            url += "?" + $.param(options.data);   //这里也可以不用jqvar xhr = new XMLHttpRequest();        //发起请求xhr.open('get', url);
            xhr.responseType = 'blob';        //规定响应为流文件            xhr.send();
            xhr.onreadystatechange = function(){if (this.readyState == 4){if (this.status == '401' || this.status == '402') {                                     //在这里可以进行一些请求失败的处理                    }else if(this.status == 200) {var currentBrowserType = that.browserType();  //判断浏览器类型  见上述browserType函数;if(currentBrowserType.browser==='ie'&&(currentBrowserType.version == "10.0" || currentBrowserType.version == "11.0")){   //如果IE创建iframe对象来下载var href = window.URL.createObjectURL(this.response);var elemIF = document.createElement("iframe");
                                elemIF.src = "http://" + location.host + '/crowd-web/file/downloadFile?' + $.param(options.data);
                                elemIF.style.display = "none";
                                document.body.appendChild(elemIF);
                          }else if( currentBrowserType.browser==='edge'){ //如果edge使用h5的a标签的下载功能实现if (this.getResponseHeader("content-disposition")) {var fileName = decodeURI(this.getResponseHeader("content-disposition").replace("attachment;filename=", ""));
                                }var href = "http://" + location.host + '/crowd-web/file/downloadFile?' + $.param(options.data);var $dllink = $('<a></a>').appendTo(document.body);
                                $dllink[0].click();
                                 window.URL.revokeObjectURL(href);
                        } else {  //其他现代浏览器采用H5的a标签新特性实现var href = window.URL.createObjectURL(this.response);if (this.getResponseHeader("content-disposition")) {var fileName = decodeURI(this.getResponseHeader("content-disposition").replace("attachment;filename=", ""));
                                }var $dllink = $('<a></a>').appendTo(document.body);                             //initMouseEvent已经被放弃,直接使用a标签的dom节点click功能触发点击//var event = document.createEvent("MouseEvents");//event.initMouseEvent(//    "click", true, false, window, 0, 0, 0, 0, 0//    , false, false, false, false, 0, null//);//$dllink[0].dispatchEvent(event);$dllink[0].click();

                            window.URL.revokeObjectURL(href); //告诉浏览器可以释放该路径                        }
                    }
                }
            };
        },
登录后复制
View Code

 下载函数调用:如下

(以上方法均定义在全局对象tools中,也可以写成自己需要的方式)

 tools.dlFile({
                    data : {"fileId":item.id},
                    url :config.URL.downLoad,
                    contentType : "application/json;chartset=utf-8",
                })
登录后复制
View Code

 相关知识点:

文件下载的最佳方法选用:博文;

使用H5 a标签的新特性:博文;

Blob对象及createObjectURL 和revokeObjectURL方法 : 博文;

提问:

a标签模拟click事件: 你猜如下代码能触发页面调转吗?

nbsp;html&gt;<meta><a>百度</a><button>跳到百度</button><script></script><script>$("button").click(function(){
         alert(123)
         $("#hehe").click();
    })</script>
登录后复制
View Code

 

以上就是js文件下载及命名的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号