首页 / JAVASCRIPT / js文件下载及命名
js文件下载及命名
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js文件下载及命名,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含4198字,纯文字阅读大概需要6分钟。
内容图文
![js文件下载及命名](/upload/InfoBanner/zyjiaocheng/301/8ad1f60779024da3923e3bf32fd8168c.jpg)
函数功能:实现主流浏览器的文件下载功能;
兼容性: >=IE10,Edge,chrome,firefox;
与后台的请求方式:GET请求, url携带参数 url?id=123(隐藏文件真实路径);
实现下载功能的前提是判断出浏览器类型:
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521673.jpg)
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521701.jpg)
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; } } },
下载函数定义:如下
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521727.jpg)
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521753.jpg)
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 href="' + href + '" download="' + fileName + '" ></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 href="' + href + '" download="' + fileName + '" ></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); //告诉浏览器可以释放该路径 } } } }; },
下载函数调用:如下
(以上方法均定义在全局对象tools中,也可以写成自己需要的方式)
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521792.jpg)
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521831.jpg)
tools.dlFile({ data : {"fileId":item.id}, url :config.URL.downLoad, contentType : "application/json;chartset=utf-8", })
相关知识点:
文件下载的最佳方法选用:博文;
使用H5 a标签的新特性:博文;
Blob对象及createObjectURL 和revokeObjectURL方法 : 博文;
提问:
a标签模拟click事件: 你猜如下代码能触发页面调转吗?
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521858.jpg)
![js文件下载及命名 - 文章图片](/upload/getfiles/0001/2021/4/22/20210422071521885.jpg)
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"></head><body><a href="http://www.baidu.com" id="hehe">百度</a><button>跳到百度</button><script src="bower_components/jquery/dist/jquery.js?1.1.11"></script><script>$("button").click(function(){ alert(123) $("#hehe").click(); })</script></body></html>
以上就是js文件下载及命名的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的js文件下载及命名全部内容,希望文章能够帮你解决js文件下载及命名所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。