如何从 angular6/7 的帖子中获取大 json

Question

I have migrated a piece of code to be able to export data as excel file in angular. I assume the fact that the json is well formed and send from the server to the angular side. I can see it in the network frame in th browser. For small json, it's ok but when the size of the json starts to be large, the answer still failed. This following code corresponding to the service call

 exportSynthesis(recordId: number, moduleId: number) {
    const body = null;

    return this.http.post(this.apiUrl + `/data`
      + `${recordId}/module/${moduleId}`, body,
      { 
        headers: new HttpHeaders({ 'Content-Type': 'application/json' }), 
        observe: 'response', responseType: 'json' }).pipe(
        map((resp: any) => {
          return resp.body;
        }));
  }

and here, its the method which manages the return.

  exportSynthesis() {
    this.service.exportSynthesis(this.recordId, this.moduleId)
      .subscribe(
        (exportResult) => { this.exportResult = exportResult; },
        err => {
          console.log('err:', err);
          this.errorHandlerService.handleError('failed', err);
          
        },
        () => {
          console.log('json:', this.exportResult);
          const worksheet: XLSX.WorkSheet = XLSX.utils.json_to_sheet(this.exportResult);
          const workbook: XLSX.WorkBook = { Sheets: { 'data': worksheet }, SheetNames: ['data'] };
          const excelBuffer: any = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

          const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8' });
          const url = window.URL.createObjectURL(blob);
          const a = document.createElement('a');
          a.href = url;
          a.download = '(GEO) ' + this.record.label + ' - name.xlsx';
          a.click();
          window.URL.revokeObjectURL(url);
          a.remove();
        });
  }

Currently, i do not manage to understand why it still finish in error and I get only "ok" in the console log. Any idea?

regards

Answer 1

Angular's HttpClientModule default response is a json.
Your problem is that you try to access the body property of the HTTP response, but Angular interprets that as you trying to access the body property in the body of the response.

Remove observe and responseType from your post request and treat the response as a json. It should work.

Answer 2

find:
just need to use text as json

    return this.http.post(this.apiUrl + `/geo/v1/synthesis/xls/record/`
      + `${recordId}/module/${moduleId}`, body,
      { 
        headers: headers, 
        observe: 'response',
         responseType:  'text' as 'json'}).
          map((resp: any) => {
            return resp.body;      
          });
  }