js 파일 다운로드 및 이름 지정

js 파일 다운로드 방법, IE를 사용한 파일 다운로드 방법, 태그 다운로드, 브라우저 다운로드

호환성: >=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;
                }
            }
        },

코드 보기

다운로드 기능 정의: 다음과 같습니다

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="&#39; + href + &#39;" download="&#39; + fileName + &#39;" ></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="&#39; + href + &#39;" download="&#39; + fileName + &#39;" ></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.dlFile({
                    data : {"fileId":item.id},
                    url :config.URL.downLoad,
                    contentType : "application/json;chartset=utf-8",
                })

보기 코드

관련 지식 포인트:

파일을 다운로드하는 가장 좋은 방법: 블로그 게시물

H5 a 태그의 새로운 기능 사용: 블로그 게시물

Blob 개체 및 createObjectURL 및 revokeObjectURL 방법: 블로그 게시물; 질문:

a 태그는 클릭 이벤트를 시뮬레이션합니다. 다음 코드는 페이지 전송을 트리거할 수 있습니까?

<!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 파일 다운로드 및 이름 지정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!