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 = new 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 = new Blob([res]);
                    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);
                    }

                },
                (error)=>{
                    let reader = new 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;