Get warning Invalid stream: "FormatError: Bad FCHECK in flate stream: 120, 253"

HI, I have a Jersey Backend REST service to get the PDF from server to Client. I set the response to React state so that this will not retrieve the PDF from backend again in state changed. However, I got the error Warning: Invalid stream: “FormatError: Bad FCHECK in flate stream: 120, 253” in loading that PDF to Document. All content of PDF are lost.

May I know how to solve this?

Below is my code:

Server

        @Override
        @GET
        @Path("/pdf")
        @Produces(MediaType.APPLICATION_PDF_VALUE)
public Response testPdf() throws Exception {

    File file = new File("C:\\Desktop\\test.pdf");
    FileInputStream fileInputStream = new FileInputStream(file);

    ResponseBuilder response = Response.ok((Object) fileInputStream);
    response.type("application/pdf");
    response.header("Content-Disposition", "filename=test.pdf");

    return response.build();
}

Client

        import React, { Component } from 'react'; 
        import { Document, Page } from 'react-pdf';
        import axios from 'axios';

      class MyApp extends Component {
         state = {
             numPages: null,
            pageNumber: 1,
           pdfContent: null
       }

    componentDidMount(){
        var that = this;

        axio.get("url\Pdf).then((response) => {
             that.setState({pdfContent: response });
        }).catch((error) => {
             console.warn(error);
        });
    }

    onDocumentLoadSuccess = ({ numPages }) => {
        this.setState({ numPages });
    }

       printHandler(){
           window.print();
      }

      render() {
          const { pageNumber, numPages } = this.state;

      return (
          <div>
             <Document
                file={this.state.pdfContent}
                onLoadSuccess={this.onDocumentLoadSuccess}
             >
                 <Page pageNumber={pageNumber} />
             </Document>
             <p>Page {pageNumber} of {numPages}</p>

             <button onClick={() => this.setState(prevState => ({ 
                     pageNumber: prevState.pageNumber + 1 }))}>Next page</button>
             <button onClick={() => this.setState(prevState => ({ 
                     pageNumber: prevState.pageNumber - 1 }))}>Prev Page</button>

              <button onClick={this.printHandler}/>
          </div>
      );
} }
```

[depiction]

As mentioned above, make sure that the response type is set to ‘blob’. Here is an example using Axios that calls an API, sets the response type, and creates a blob url from the response.

export function myService () {
    return axios.get('https://www.domain.com/api/, {
        responseType: 'blob',
        transformResponse: [function (data) {
            let blob = new window.Blob([data], { type: 'application/pdf' })
            return window.URL.createObjectURL(blob)
        }]
    })
}

[LukaszGrela]

Thanks, I’ve in the end set the responseType:'arraybuffer' in axios config and then passed the response.data to the Document’s file prop as object {data:...}

    Axios.get('http://path/to/api', { responseType: 'arraybuffer' }).then(
      response => {
        this.setState(_ => ({ file: { data: response.data } }));
      }
    );

which then is used in Document

<Document file={this.state.file}
//...