文件下载常用的几种方法

情况一 后端返回的是文件URL

直接用个 a 标签来接受后端的url.

//参数   url  文件地址    filename 文件名字
function downloadFile(url,filename){
    var link = document.createElement('a');
	var body = document.querySelector('body');
	link.href = url;
	link.download = filename;
	link.style.display = 'none';
	body.appendChild(link);
	link.click();
	body.removeChild(link);

}

注意，a标签的download属性（规定下载文件名字），在360浏览器中会弹出一个窗口，对文件进行重命名后下载，而在谷歌浏览器中download属性则无效

情况二 后端返回文件流

利用原生的XMLHttpRequest方法实现请求，再利用a标签下载

方式一，使用window.URL.createObjectURL() ，返回一个DOMString包含了一个对象URL，该URL可用于指定源 object的内容

function request () {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '<接口地址>', true);
    xhr.responseType = 'blob';       //注意： 必不可少，规定返回的文件流为blob对象
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if(xhr.status === 200){
           let  blob = xhr.response;
           if(window.navigator.msSaveOrOpenBlob){     //判断当前浏览器是否是IE/EDGE
	//这方法仅IE/EDGE 浏览器支持，而这两款浏览器无法通过a标签直接下载blob对象，故分类讨论
				navigator.msSaveBlob(blob, '下载文件名（含后缀名)' );   
		  }else{
                 let url = window.URL.createObjectURL(blob);       //这种下载，可以修改下载文件名
	            downloadFile( url,   '下载文件名（含后缀名)' ) ;
         } 
	     
      }
    };
    xhr.send('<请求参数：json字符串>');
  };
  
function downloadFile(url,filename){
    var link = document.createElement('a');
	var body = document.querySelector('body');
	link.href = url;
	link.download = filename;
	link.style.display = 'none';
	body.appendChild(link);
	link.click();
	body.removeChild(link);
}

方式二 利用var reader = new FileReader()
创建文件阅读器，再使用reader.readAsDataURL(blob)返回包含很多字符的base64

function request02 () {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '<接口地址>', true);
    xhr.responseType = 'blob';       //注意： 必不可少，规定返回的文件流为blob对象
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = function() {
      if(xhr.status === 200){
            let  blob = xhr.response;
            if(window.navigator.msSaveOrOpenBlob){     //判断当前浏览器是否是IE/EDGE
	//这方法仅IE/EDGE 浏览器支持，而这两款浏览器无法通过a标签直接下载blob对象，故分类讨论
				navigator.msSaveBlob(blob,  '下载文件名（含后缀名)' );   
		    }else{
	            var reader = new FileReader();
				reader.readAsDataURL(blob); // 转换为base64，可以直接放入a标签href
				reader.onload = function(e) {
				   let url = e.target.result;
		            downloadFile( url,   '下载文件名（含后缀名)' ) ;
		        } 
	      }     
    };
    xhr.send('<请求参数：json字符串>');
  };
 
function downloadFile(url,filename){
    var link = document.createElement('a');
	var body = document.querySelector('body');
	link.href = url;
	link.download = filename;
	link.style.display = 'none';
	body.appendChild(link);
	link.click();
	body.removeChild(link);
}

URL.createObjectUrl() 方法和 reader.readAsDataURL(blob) 方法的对比，请参考如下：https://blog.csdn.net/qq_39258552/article/details/84133770

参考链接：https://blog.csdn.net/cpongo5/article/details/88577883?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task