React PDF working with the response from a POST

Objective

I’m trying to load a PDF into react-pdf viewer following a POST request to the backend. I’m sending some DOM elements to the backend to render a PDF, this is being sent through the POST body.

Solutions I’ve tried

On the README section the document has a file prop, which has three possible input formats. I’ve tried making the request for the PDF file and passing the response contents into the Document file prop via the React component state. Currently I just receive “Failed to load PDF file.”.

  const print = () => {
    const domElement = document.querySelector('html');
    printDomElements(domElement, setFile);
  }

      <button onClick={print}>Print this page</button>
      {!file ? null : (
        <Document file={file}></Document>
      )}

printDomElements makes an axios request and sets the state through the callback function.

I’ve also considered using the structure below, but it looks like this is probably for a GET request only (maybe I’m wrong):

{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }, withCredentials: true }

Any ideas how I can pipe the response of the POST request into React PDF?

Environment

• Chrome 80 “react-pdf”: “^4.1.0”, “react”: “16.8.6”,

[Kasunthilina]

@SailleshPawar when you do a post request to get data. you should pass bellow parameter in header section responseType: ‘arraybuffer’, headers: { ‘Content-Type’: ‘application/json’, Accept: ‘application/pdf’, }

[sbitproz]

Hi @SailleshPawar i was by doing the following:

 <Document
            file={`data:application/pdf;base64,${fileBase64}`}
            onLoadSuccess={onDocumentLoadSuccess}
          >
          <Page pageNumber={documentPages.pageNumber} />
</Document>

The key being data:application/pdf;base64, - base64 sufficed for me.

I think the documentation needs to be updated address the base64 format.