角度2とWeb APIを使用してファイルをダウンロード

Question

Angular 4とWeb APIアプリケーションがあります。Web APIとtypescript Blobを使用してファイルをダウンロードしようとしています。以下は両方のコードサンプルです。 私がダウンロードボタンをクリックすると、投稿要求がWeb APIに送信されます。このAPIはファイルストリームを送信すると、このストリームを画像に変換します。しかし、私がこの画像を開くと、私はこのファイルを開くことができません。

コード - ： ウェブ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; 
     }); 
} 

Answer 1

私は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(); 
    } 
    }); 
}