js跨域请求下载excel文件。

Question

前后分离后

export const download = function(options){

let xhr = new XMLHttpRequest();  // XMLHttpRequest 对象
xhr.open("GET", options.url, true);
xhr.setRequestHeader('Authorization', authorization());//前后分离的权限头
xhr.send(obj2url(options.get));
xhr.responseType = "blob";//这里是关键，它指明返回的数据的类型是二进制
xhr.onreadystatechange = function(e) {
    if (this.readyState == 4 && this.status == 200) {
        console.log('change download');
        var response = xhr.response;
        let url = URL.createObjectURL(response);
        img.src=url;//如果这里是图片，可以显示出图片。
        window.open(url);//想通过打开窗口来下载excel文件。却不可以。
    }
}

};

想通过download({url:"http://xxx.ssss:88/sss.xls"});来下载服务器的excel文件。

Answer 1

第一楼评论的很好啊

直接用 a标签 然后模拟点击，直接系统的下载就行了，何必还要自己去ajax请求。。而且还跨域了

祖传前端下载js，供你参考

function fake_click(obj) {
  var ev = document.createEvent('MouseEvents');
  ev.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
  obj.dispatchEvent(ev);
}

function export_raw(name, data) {
  var urlObject = window.URL || window.webkitURL || window;
  var export_blob = new Blob([data]);
  var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
  save_link.href = urlObject.createObjectURL(export_blob);
  save_link.download = name;
  fake_click(save_link);
}

Answer 2

先弄清楚俩问题，地址是否暴露给外网请求：

（1）如果暴露给外网

就直接写a标签href指向那个地址就OK了。

（2）如果只对内网暴露

有两种方法：
1.找运维给你配置地址，让服务器excel文件夹暴露，然后走（1）
2.前端工程做一层代理，再往后端请求，就不跨域了，然后走（1），地址是你前端项目配置的地址。