react-pdf: 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>
      );
} }
```

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 19 (6 by maintainers)

Most upvoted comments

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)
        }]
    })
}

+37

depiction on Feb 13, 2019

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}
//...

+27

LukaszGrela on Feb 13, 2019

I finally figured out the problem. I fixed it by changing the response type on the API request that gets the file to ‘blob’. The default is ‘application/json’.

depiction on Feb 1, 2019