Question

我正在尝试将React JS中的Grid数据导出为excel和pdf。我使用React JS作为前端，使用Spring RestAPI作为服务。以下是该服务的代码。当我从React调用这些服务时，我在响应对象中收到字节码，并且不会生成export或pdf。

 @PostMapping(value = "/arcadesExportToPDF", produces = MediaType.APPLICATION_PDF_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
   public ResponseEntity<InputStreamResource> arcadesExportToPDF(
                @RequestBody arcadesSearch arcadesSearch ) throws IOException {

    List<ArcadesSearchResult> arcadesSearchList = arcadesSearchService.searchArcades(arcadesSearch);;

    ByteArrayInputStream in = GeneratePDFReport.arcadesToPDF(arcadesSearchList);
    HttpHeaders headers = new HttpHeaders();            
    headers.add("Content-Disposition", "attachment; filename=arcadesSearch.pdf");


    return   ResponseEntity.ok().headers(headers).contentType(MediaType.APPLICATION_PDF).body(new InputStreamResource(in));
}

@PostMapping(value = "/arcadesExportToExcel", produces = MediaType.APPLICATION_OCTET_STREAM_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE)
public ResponseEntity<InputStreamResource> arcadesExportToExcel(
        @RequestBody arcadesSearch arcadesSearch ) throws IOException {

    List<ArcadesSearchResult> arcadesSearchList = arcadesSearchService.searchArcades(arcadesSearch);;

    ByteArrayInputStream in = GenerateExcelReport.arcadesToExcel(arcadesSearchList);
    HttpHeaders headers = new HttpHeaders();            
    headers.add("Content-Disposition", "attachment; filename=arcadesSearch.xlsx");


    return    ResponseEntity.ok().headers(headers).contentType(MediaType.APPLICATION_OCTET_STREAM).body(new InputStreamResource(in));
}

现在这里的代码来自React JS。我们正在使用axios调用Rest Web服务。

    export function makePostCall(url, postData, state, contentType, retryCount=0) {

    const postUrl= url;    
    const headerObj = contentType ? {
      "Accept": "application/json"
    } : {
      "Content-Type": "application/json; charset=utf-8",
      "Accept": "application/json; application/pdf"
    };
    const options = {
      method: "POST",
      headers: new Headers(headerObj),
      credentials: "same-origin",
      data: contentType ? postData : JSON.stringify(postData)
    };
  return axios(postUrl, options).then(function(response) {

     return processResponse(response);
  }).catch(error => {
    if(error.name.toUpperCase()==="TYPEERROR" && error.message.toUpperCase() === "NETWORK REQUEST FAILED" && retryCount<maxRetryCount){
      retryCount++;
      return makePostCall(url, postData, state, contentType, retryCount);
    }
      return Promise.reject(genericError);

  });
}

我们非常感谢您的帮助。在此先感谢

React JS接收字节数据而不是PDF或Excel页面

0 个答案: