Can't view .pdf file with react-pdf

Question

I am trying to view a pdf that I'm fetching from a service with axios.

I have a dialog that has a "print" button which opens another dialog where the pdf should be. Sadly the prop (the file) that I am handing the second dialog is undefined. The service method I call just returns byte[], so my response is an ArrayBuffer.

Here's some code.

MAIN DIALOG

state = {
    open: false,
    pdf: undefined // my file
}
....
// this prints some data I send to the service and receives a file that I place in my state
print = async table => { 
    const pdf = await this.props.print(somedata); // send some data to service and get the pdf blob in the response
    let fileUrl = URL.createObjectURL(pdf); // create a url
    this.setState({ // open the dialog and set the content
      pdf: fileUrl,
      isPDFDialogOpen: true
    });
  }
....
render() {
    const { isPDFDialogOpen, pdf} = this.state;
    return() {
    <div>
        <DialogContent>
            <IconButton><PrintIcon onClick={ () => this.print() } /></IconButton>
        </DialogContent>
        <SecondDialog open={isPDFDialogOpen} close={this.closePDFViewer} file={pdf}/>

    </div>
    )
}

SECOND DIALOG

import { Document, Page } from "react-pdf/dist/entry.webpack";
....
render () {
    const { file, open, close, title } = this.props;
    const { numPages, pageNumber } = this.state;
    console.log(file) // returns undefined -> this should be this.props.file
    return (
      <Dialog
        open={ open }
        fullScreen
      >
        <DialogContent>
          <Document
            file={ file }
            onLoadSuccess={ this.onDocumentLoadSuccess }
          >
            <Page pageNumber={ pageNumber } />
          </Document>
          <p>Page { pageNumber } of { numPages }</p>
        </DialogContent>
        <DialogActions>
          <Button onClick={ close }>CLOSE</Button>
        </DialogActions>
      </Dialog>
    );
  }

AXIOS

export const print = data => {
  return axios({
    url: `someurl`,
    responseType: 'blob',
    data: data,
    timeout: 20000,
    method: 'POST'
  }).then(response => {
    console.log(response)
    return response.data;
  }).catch(error => {
    if (error.response) {
      // DEBUGGING
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }
  });
}

AND mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  print: (data, type) => print(data, type)
});

This is what I am receiving - the first log is console.log(response) and the second one is console.log(response.data). If I do window.open(pdf) it opens a new tab and instantly closes it. The second dialog just gives me Loading PDF…

I am using "react": "^16.3.1", "react-pdf": "^4.0.5", "@material-ui/core": "^3.4.0", "axios": "^0.18.0",

I am glad for any tips including using other libraries to view a pdf!

EDIT: I removed the responseType from axios and now I am receiving data that looks like . How do I handle it?

Other things I've tried:

print = async table => { 
    const pdf = await this.props.print(somedata, table);
    const file = new Blob([pdf], {type: 'application/pdf'});
    let fileUrl = URL.createObjectURL(file);
    this.setState({ // open the dialog and set the content
      pdf: fileUrl,
      isPDFDialogOpen: true
    });
  }

And if I print fileUrl it gives me this blob:http://192.168.1.250:3000/ff3efca5-becd-49df-be83-66c7ff945f80 and if I try opening it via window.open(), it opens a tab and closes it in a split second.

EDIT : I ditched this approach. What worked for me was using the <object /> tag. I now receive the file encoded with base64 as String which I decode using this method from Jeremy.

My code looks like this now:

<div>
    <object style={{height: '85vh'}} data={ this.props.file } type="application/pdf" width='100%' height='100%'>alt : <a href="test.pdf"/>
    </object>
</div>

If anyone knows why react-pdf wasn't rendering my file, please add an answer or comment!