Please Help react-pdf/renderer PDFViewer with Dynamic Data

Question

I'm currently working on some project which using @react-pdf/renderer diegomura as the pdf generator, so far I found that to be able fill the pdf content dynamically was using the "BlobProvider" component from @react-pdf/renderer.

However, the blobprovider direct the user to a new tab , i just want to show the content in the same tab like Iframe (include with the dynamic changes from input box)

I've tried using iframe, it just generate the PDF document, I cannot get the dynamic state for the pdf document. I const the pdf document before class, therefore the state constructor cannot passed to the above const

Anyone have some solutions or ever found similar problem like this? Thank you in advance.

Answer 1

Can you give this a try? I am using this and works fine. It will render the pdf and embed on page using iframe.

import { PDFViewer, Document, Page } from "@react-pdf/renderer";

<PDFViewer showToolbar={false}>
    <Document
      author={name}
      title={name}
      subject="Document name"
    >
      <Page size="A4" wrap {...props}>
        ...
      </Page>
    </Document>
</PDFViewer>