使用angular 2和web API下載文件

我有Angular 4和web API應用程序，我正嘗試使用Web API和typescript Blob下載文件。以下是兩者的代碼示例。當我點擊下載按鈕時，一個發佈請求被髮送到Web API，響應發送文件流，typescript將此流轉換爲圖像。但是當我打開這張圖片時，它顯示下面的錯誤 - 「我們無法打開這個文件」。使用angular 2和web API下載文件

碼 - ：的Web API

public HttpResponseMessage Download() 
    { 
     string strFileUrl = "some absolute path"; 

     if (strFileUrl != "") 
     { 
      FileInfo file = new FileInfo(strFileUrl); 

      HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK); 


      var stream = new FileStream(file.FullName, FileMode.Open); 
      response.Content = new StreamContent(stream); 
     // response.Content = new ByteArrayContent(CommonUtil.FileToByteArray(file.FullName)); 
      response.Content.Headers.ContentType = new MediaTypeHeaderValue(CommonUtil.GetContentType(file.Extension.ToLower())); 
      response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment") { 
       FileName = file.Name 
      }; 
      response.Content.Headers.ContentDisposition.FileName = file.Name; 
      response.Content.Headers.ContentLength = file.Length; 
      response.Headers.Add("fileName", file.Name); 

      return response; 
     } 
     return new HttpResponseMessage(HttpStatusCode.NotFound); 
    }

角Component.ts -

private OnImageDownloadClick() 
{ 
    this.uploadServiceRef.DownloadFile(path).subscribe(x => { 

    // method 1 
     let head = x.headers.get("Content-Type"); 
     let fileName = x.headers.get("fileName"); 
     this.fileSaverServiceRef.save(x, fileName, head); 

     OR 

    // method 2 
     let head = x.headers.get("Content-Type"); 
     var blob = new Blob([x.arrayBuffer], { type: head }); 

     var fileURL = URL.createObjectURL(blob); 
     window.open(fileURL); 
    }, 
    error => console.log(error)); 
}

Service.ts-

public DownloadFile(path): Observable<any> { 
    let obj: any = { 
     path: path 
    } 
    this.headers = new Headers(); 
    this.headers.append('Content-Type', 'application/json'); 
    this.headers.append('responseType', ResponseContentType.Blob); 

    return this.http.request(DOWNLOAD_DOCUMENT_URL, RequestMethod.Post, this.headers, obj) 
     .map((x) => { 
      return x; 
     }); 
}

來源

2017-08-02 Akash Shelke

也許您正在搜索的內容IST此解決方案：https://stackoverflow.com/questions/44871600/download-file-sent -in-response-angular2 – Ludwig

已經嘗試過這個解決方案，但是下載空白文件 –

這個怎麼樣... https://stackoverflow.com/questions/35138424/how-do-i-download-a-file-with- angular2 – JGFMK

我在創建的docx文件也有類似的問題從流和我結束了這樣做：

個

Service.ts：

postAndGetResponse(myParams){ 
    return this._http.post(this.api, {myParams}, {responseType: ResponseContentType.Blob}) 
    .map(response => (<Response>response).blob()) 
    .catch(this.handleError); 
}

Component.ts：

downloadFile(){ 
    this.service.postAndGetResponse(myParams).subscribe(response => { 
    var fileName = "nameForFile" + ".extension"; 
    if(window.navigator.msSaveOrOpenBlob) { 
     window.navigator.msSaveOrOpenBlob(response, fileName); 
    }else{ 
     var link = document.createElement('a'); 
     link.setAttribute("type", "hidden"); 
     link.download = fileName; 
     link.href = window.URL.createObjectURL(response); 
     document.body.appendChild(link); 
     link.click(); 
    } 
    }); 
}

來源

2017-12-19 10:32:32 Dalcof

使用angular 2和web API下載文件

回答

相關問題