js跨域下载文件

下载文件时遇到跨域下载文件 ,a标签的 download 无法实现跨域问题,耗时一天半终于解决,做个笔记记录下。

html或jsp页面:

<button onclick="downFile()">下载</button>  --  注意 此处button 只是一个触发下载文件的时机,可根据具体业务需求修改

  js代码:

//下载文件
function downFile(){
	var url="需要下载文件的url路径";
    var xhr=new XMLHttpRequest();
    xhr.open("GET",url,true);
    xhr.responseType='blob';
    xhr.onload=function(e){
    	if (xhr.status === 200) {
            var fileName=getFileName(url);//获取文件名
            saveFile(xhr.response,fileName);
        }
    }
}
//保存文件
function saveFile(data,fileName){
	var export_blob=new Blob([data]);
    var save_link=document.createElement('a');
    document.body.appendChild(save_link);
    save_link.style.display='none';
    var urlObject=window.URL.createObjectURL(export_blob);
    save_link.href=urlObject;
    save_link.download=fileName;
    save_link.click();
    document.body.removeChild(save_link);
}
//根据url获取文件名
function getFileName(url){
    var num=url.lastIndexOf("/")+1;
    var fileName=url.substring(num);
    fileName=decodeURI(fileName.split("?")[0]);
    return fileName;
}

  

posted @ 2020-06-10 17:21  我爱香香  阅读(4572)  评论(0编辑  收藏  举报