前端利用get请求下载文件，并拦截到下载错误

在vue项目中遇到一个需求，调用接口下载对应日期的doc文件。 一开始采用的方式是如图所示，主要利用原生js创建a标签，并触发 发现问题：

1、因为是利用a链接的方式去触发下载接口地址，这样导致当下载错误时，会直接链接到无效地址，导致页面报错。

2、改用axios get请求 设置responseType为blob，发现请求都不正确，都走到了catch回调。（具体原因没找到）

解决方式：通过原生的js的请求方式，成功拦截到下载错误，只有当请求成功时才触发a链接的事件。

    // 点击下载按钮
     clickDownloadBtn() {
     	let baseURL = process.env.NODE_ENV === 'production'?'':'http://33.111.111.99:8888' //以实际为准 这里随便写的
         let url = `${baseURL}+接口地址`;
         this.downloadDoc(url, `${this.tenant}-${this.currentReportDate}`);
     }
 //下载报告
     downloadDoc(urlStr, name) {
         let that = this;
         let xhr = new XMLHttpRequest();
         let fileName = name + '.docx'; // 文件名称
         xhr.open('GET', urlStr, true);
         xhr.responseType = 'blob';//数据类型为blob
         // xhr.setRequestHeader('Authorization', 'Basic a2VybWl0Omtlcm1pdA=='); // 请求头中的验证信息等（如果有）
         xhr.onload = function(res) {
             if (this.status === 200) {//请求成功
                 var type = xhr.getResponseHeader('Content-Type');
                 var blob = new Blob([this.response], { type: type });
                 if (typeof window.navigator.msSaveBlob !== 'undefined') {
                     /*
                      * For IE
                      * >=IE10
                      */
                     window.navigator.msSaveBlob(blob, fileName);
                 } else {
                     /*
                      * For Non-IE (chrome, firefox)
                      */
                     var URL = window.URL || window.webkitURL;
                     var objectUrl = URL.createObjectURL(blob);
                     if (fileName) {
                         var a = document.createElement('a');
                         if (typeof a.download === 'undefined') {
                             window.location = objectUrl;
                         } else {
                         //创建a链接并触发
                             a.href = objectUrl;
                             a.download = fileName;
                             document.body.appendChild(a);
                             a.click();
                             a.remove();
                         }
                     } else {
                         window.location = objectUrl;
                     }
                 }
             } else {
                 that.$message({
                     message: '暂无报告',
                     type: 'warning'
                 });
             }
         };
         xhr.send();
     },