js 实现文件下载/文件导出

1. POST方式进行文件导出；

  // url 下载URL
   fileName 下载文件名称
  function exportFile(url,fileName) {
    let xhr = new XMLHttpRequest();
    xhr.open("POST",url);
    xhr.responseType = "blob";
    xhr.onload = () => {
      let ctx = xhr.response;
      let blob =  Blob([ctx]);
      if ("msSaveOrOpenBlob" in navigator) {兼容IE
        window.navigator.msSaveOrOpenBlob(blob,fileName);
      } else {
        let aLink = document.createElement("a");
        aLink.download = fileName;
        aLink.style.display = "none";
        aLink.href = URL.createObjectURL(blob);
        document.body.appendChild(aLink);
        aLink.click();
        document.body.removeChild(aLink);
      }
    };
    xhr.send();
  }

使用方法：exportFile(url,fileName)；

 

使用Angular方式进行导出：

class ExportEvent {
      constructor( private http:HttpClient ){}
         url 下载URL
         fileName 下载文件名称
      exportFile(url,fileName){
            this.http.request("POST",url,{},{responseType:"blob"}).pipe()
　　　　　　　.subscribe(
                (res)=>{
                    let blob =  Blob([res]);
                                            window.navigator.msSaveOrOpenBlob(blob,fileName);
                    }  {
                        let aLink = document.createElement("a");
                        aLink.download = fileName;
                        aLink.style.display = "none";
                        aLink.href = URL.createObjectURL(blob);
                        document.body.appendChild(aLink);
                        aLink.click();
                        document.body.removeChild(aLink);
                    }

                },(error)=>{
                    let reader =  FileReader();
                    reader.onload = (e)=>{
                        if(e && e["target"]){
                            let errorMsg = JSON.parse(e["target"]["result"]);
                            if(errorMsg && errorMsg["code"]){
                                console.log("有报错，出错了。。。。。");
                            }
                        }
                    }
                    error.error的值是一个Blob对象
                    reader.readAsText(error.error);
                }
　　　　　　　);
        }
 }

 

2. GET方式进行文件导出；

 url 下载路径
window.location = url;