XMLHttpRequest 链接下载

XMLHttpRequest 链接下载

• 通过链接点击下载word文档zip文件等
  1.XMLHttpRequest 对象用于在后台与服务器交换数据。
  2.创建a链接DOM元素进行下载

通过链接下载的是GET请求

let DLSBookSentPaper = (id, name, type) => {
    let url = *请求所需url地址*;
    let fileUlr = url + `?id=${id}&name=${name}&type=${type}`;
    downloadZipXML(fileUlr , '下载数据类型') 
    // downloadZipXML(fileUlr, 'application/msword') 
}

• 上面代码是创建下载文件的路径 ,自己自主拼接成a链接下载地址 ，此地址直接粘贴在浏览器地址栏中便可下载

封装下载函数

let downloadZipXML = (fileUlr, responseType = "application/zip") => {
    var x = new XMLHttpRequest();   
    x.open("GET", fileUlr, true);
    x.responseType = "blob";
    x.onload = function (e) {
        if (e.target.status === 500) {
            console.log('无下载数据'); //后台请求错误在此拦截
            return
        }
        
      if (isJSON(x.responseText)) {      //此处用来判断是否是JSON类型，不能让系统报错
           // 此处也可以判断下载类型  当下载的数据类型和自己想现在的类型不同时再此终止
           //  if (x.response.type !== responseType) {
           //         console.log('无下载数据'); 
          //       return
          //  }
            let result = JSON.parse(x.responseText)
            if(result.msg){
                 console.log(result.msg); 
                // Message({ message: result.msg , type: "error" });   //此处引用了element-ui 
            }else{
               console.log('无下载数据'); 
              //    Message({ message: '无下载数据' , type: "error" });  //此处引用了element-ui 
            }
            return
        }
   
        var downloadUrl = e.target.responseURL   //获取下载地址

        var anchor = document.createElement("a");  //创建 a标签dom元素 
        anchor.href = downloadUrl;  
        // anchor.download = 'fileName';  //为下载数据重新命名
        anchor.click();
        anchor.remove()
        console.log('下载成功');
        // window.location.href = e.target.responseURL
    };
    x.send(null);
}

let isJSON = (str)=>{
    if (typeof str == 'string') {
        try {
            var obj=JSON.parse(str);
            if(typeof obj == 'object' && obj ){
                return true;
            }else{
                return false;
            }

        } catch(e) {
            return false;
        }
    }
}

• 请求如下：

  
  XML请求详情