XMLHttpRequest 对象实现下载文件，并且实时显示进度条（兼容ie，chrome，Firefox）

有关XMLHttpRequest对象的详细信息可以参照 xmlHttpRequest web API 接口文档: https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest.

最近做项目关于下载方面的功能采用了XMLHttpRequest 对象来进行开发。下面是具体的开发代码。

获取浏览器类型

开发项目中可能会对浏览器进行限制，所以增加了一个获取浏览器类型的方法，该文档中的下载功能只针对火狐浏览器，ie浏览器和谷歌浏览器。

// 获取浏览器类型
getBrowser:function() {
   var userAgent = window.navigator.userAgent; //取得浏览器的userAgent字符串
   var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
   var isIE = !!window.ActiveXObject || "ActiveXObject" in window; //判断是否IE浏览器
   var isEdge = userAgent.indexOf("Edge") > -1; //判断是否IE的Edge浏览器
   var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
   var isSafari = userAgent.indexOf("Safari") > -1
        && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器
   var isChrome = userAgent.indexOf("Chrome") > -1
        && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器
   if (isIE) {
       return "IE";
   }
   if (isOpera) {
   	   return "Opera";
   }
   if (isEdge) {
       return "Edge";
   }
   if (isFF) {
       return "Firefox";
   }
   if (isSafari) {
      return "Safari";
   }
   if (isChrome) {
       return "Chrome";
   }
}

进行下载处理

xmlRequest 是在data中定义的 xmlRequest：new XMLHttpRequest(),progress也是在data中定义的

// path 指文件下载的路径，fileName 指文件下载保存的名称
// xmlRequest 也是在data中定义的 xmlRequest：new XMLHttpRequest()
download:function(path, fileName) {
   this.xmlRequest.open('get', path, true);
   this.xmlRequest.responseType = "blob";//这里是关键，它指明返回的数据的类型是二进制
   this.xmlRequest.addEventListener('progress',function(evt){
       var percent = evt.loaded / evt.total;
   	   this.progress=parseInt(percent*100);//progress 在data中定义的全局变量，显示的进度
   });
   //下载成功触发的事件
   this.xmlRequest.addEventListener('load',function (ev) {
   		let self = this;
        this.handleDown(fileName,self );
   });
   //下载结束触发的事件（无论下载成功失败，还是中断都得执行loadend）
   this.xmlRequest.addEventListener('loadend',function (ev) {
        this.loadend();
   });
   //下载失败触发的事件
   this.xmlRequest.addEventListener('error',function (ev) {
   	    this.error();
   });
   //下载中断触发的事件
   this.xmlRequest.addEventListener("abort", function(ev) {
        this.abort();
   });
   try{
       this.xmlRequest.send(null);
   }catch(e) {
       this.$message.error('请检查网络是否正常!');
       return;
   };
},

下载成功的方法

// An highlighted block
handleDown:function(fileName,vueObj){
            //下载完成事件：处理下载文件
    if (vueObj.xmlRequest.readyState === 4 && vueObj.xmlRequest.status === 200) {
        var b = vueObj.getBrowser();
        //判断浏览器类型
        if (b == "Chrome"){
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(vueObj.xmlRequest.response);
            link.download = fileName;
            link.click();
            vueObj.progress = 0;
        }else if (b == "Firefox"){
            var file = new File([vueObj.xmlRequest.response],fileName,{type:'application/octet-stream'});
            var url = URL.createObjectURL(file);
            parent.location.href = url;
            vueObj.progress = 0;
       }else if (b == "IE"){
            var file = new Blob([vueObj.xmlRequest.response], { type:'application/force-download' });
            window.navigator.msSaveOrOpenBlob(file, fileName);
            vueObj.progress = 0;
       }
   }else{
       vueObj.$message.error('请检查网络是否正常！');
       vueObj.xmlRequest = new XMLHttpRequest();
       return;
   }
   vueObj.$message.success('下载成功！');
   return;
}

下载失败的方法

// An highlighted block
error:function(){
    this.progress = 0;
    this.xmlRequest = new XMLHttpRequest();
    this.$message.error('下载出错');
}

下载中断的方法

// An highlighted block
abort:function(){
    this.progress = 0;
    this.xmlRequest = new XMLHttpRequest();
}

下载结束的方法

// An highlighted block
loadend:function(){
    this.progress = 0;
    this.xmlRequest = new XMLHttpRequest();
}

以上就是关于XMLHttpRequest 对象下载的js代码，HTML页面代码没有放出来，具体的操作可以根据自身的需要做更改。在使用XMLHttpRequest 对象下载结束后一定要重新初始化一下，否则会出现多次下载的现象。（即：this.xmlRequest = new XMLHttpRequest();）