无法在 post 请求 angular 5 中设置 responseType，试图从 post api 捕获文件响应

Question

我正在尝试将 responseType 设置为 arraybuffer，但出现错误。 api 正在返回一个文件，我需要捕获它并生成文件。

我正在如下调用 exportCartDetails，它是在 Mat Dialog 上的 onAdd 事件发射器上触发的。

const data1 = this.dialogRef.componentInstance.onAdd.subscribe(result => {
      this.exportCartDetails(result)
        .subscribe(
          mydata=>{
            console.log('data is all here');
            var file =new Blob([mydata],{type: 'application/vnd.ms-excel' });
            var fileURL=URL.createObjectURL(file);
            let a =document.createElement("a");
            a.style.display = "none";
            a.href=fileURL;
            a.target="_blank";
            a.download="CartData.xls";
            a.click();
            a.remove();
         }
      )
        ,
    err=>{
    alert("Error in calling api");
    console.log(err);
  };

导出购物车详情如下

  exportCartDetails(report_data: ReferenceDataApi): Observable<ArrayBuffer> {
    const headers=new HttpHeaders().set('Content-Type', '*' );    
    //header.set( 'Content-Disposition': 'attachment; filename=' + req.body.filename,);
    const response = new HttpResponse();
    console.log(this.report_data);
    return this.http.post<ArrayBuffer>(url,this.report_data,{headers,responseType:'arraybuffer'})
    .pipe(
      catchError(this.handleError<ArrayBuffer>('exportCartDetails'))
    );    
}

错误如下。

ERROR in src/app/cart-detail/cart-detail.component.ts(118,91): error TS2345: Argument of type '{ headers: HttpHeaders; responseType: ArrayBuffer; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Types of property 'responseType' are incompatible.
    Type 'ArrayBuffer' is not assignable to type '"json"'.
src/app/cart-detail/cart-detail.component.ts(118,113): error TS2352: Type 'string' cannot be converted to type 'ArrayBuffer'.

Answer 1

作为解决方法，您可以从 httpClient.post().

中删除预期的 return 类型 <ArrayBuffer>

return this.http.post(url,this.report_data,{headers,responseType:'arraybuffer'})
    .pipe(
      catchError(this.handleError<ArrayBuffer>('exportCartDetails'))
    );

或者，您也可以尝试为 'arraybuffer' 指定别名，例如

responseType:'arraybuffer' as 'arraybuffer'

关于 this

有一个未解决的问题

代码：

return this.http.post<ArrayBuffer>(url,this.report_data,{headers,responseType:'arraybuffer' as 'arraybuffer'})
        .pipe(
          catchError(this.handleError<ArrayBuffer>('exportCartDetails'))
   );

无法在 post 请求 angular 5 中设置 responseType，试图从 post api 捕获文件响应

Unable to set responseType in post request angular 5, trying to capture file response from post api

post

http

http-post

angular

angular5