使用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下载文件

回答

相关问题