文件下載常用的幾種方法

情況一 後端返回的是文件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