vue前端下载文件的2种方式

以下两种方式下载适用于后端返回了文件的url下载地址

            var x = new XMLHttpRequest();
            x.open("GET", url, true);//url为文件的下载地址
            x.responseType = "blob";//二进制文件
            // x.withCredentials = true; //如果跨域
            x.onload = function(e) {
              var content = x.response;
              // var content = x.response;
              var blob = new Blob([content]);
              if ("download" in document.createElement("a")) {
                //表示是谷歌或者火狐浏览器，目前只有这两个浏览器支持download属性
                var url = (URL || webkitURL).createObjectURL(blob);
                var a = document.createElement("a");
                a.href = url;
                a.download = fileName;//文件的下载名称
                a.click();
                window.URL.revokeObjectURL(a.href); // 释放URL 对象
              } else {
                // IE10+下载
                // navigator.msSaveBlob(blob, str);
              }
            };
            x.send();

              const downloadRes = async (url) => {//定义的下载方法

                var filename = url.substr(url.lastIndexOf("/")+1);//获取下载名称
                let response = await fetch(url);//url为传入的下载文件地址链接
                let blob = await response.blob();
                let objectUrl = window.URL.createObjectURL(blob);//创建一个新的下载链接
                let a = document.createElement('a');
                a.href = objectUrl;
                a.download = filename;
                a.click();
                a.remove();
              }

在上述下载方法中，后台接口报跨域，但是打开后台返回的url链接地址，可以直接下载，可以判断后台应该是允许跨域了的,使用fetch方法解决跨域代码如下，亲测可用

                    const downloadRes = async (url) => {
                      var filename = url.substr(url.lastIndexOf("/")+1);
                      let response = await fetch(url,{mode:'no-cors'});//设置禁止跨域
                      let blob = await response.blob();
                      let objectUrl = window.URL.createObjectURL(blob);
                      let a = document.createElement('a');
                      a.href = objectUrl;
                      a.download = filename;
                      a.click();
                      a.remove();
                    }
                    let urlArrayList = res.data.url
                    urlArrayList.forEach((item)=>{
                        downloadRes(item)
                    })

今天又做了一种下载，后台直接返回的是文件的下载地址，但是使用上述两种方式后，一直在报跨域，然而后台暂没有解决，但是在浏览器中打开后台返回的下载地址，会直接弹出下载页面，让用户下载，因此采用了window.open的方式，代码如下

                    
                   let   urlArrayList =[http://127.0.0.1:8848/jald.xml]  
                    urlArrayList.forEach((ii)=>{
                        window.open(ii,'_blank')
                    })
//可以直接打开新页面进行下载，下载后会关闭新页面