Download PDF using react-pdf

Question

I am using react-pdf for rendering Pdf file and it's working perfectly fine. Below is the code for same:

    <Document
            inputRef={documentRef}
            file={pdfUrl}
            error={() => {}}
            onLoadSuccess={(params) => {
              console.log('paramsparams => ', params);
            }}
          >
            <Page
              renderTextLayer={true}
              renderAnnotationLayer={true}
              customTextRenderer={false}
              pageNumber={1}
              renderForms={true}
            />
          </Document>
<button onCLick={()=>// access updated pdf buffer }>Save</button>

This is rendering text layer along with form fields. As pdf is having form fields I want my user to fill in it and I should be able to store copy of filled pdf.

currently user are able to fill in details but how can I get access to updated pdf buffer object which should contains pdf with filled form so that I can create and store pdf on server?

jerick cabarloc · Accepted Answer · 2024-12-07 04:37:42Z

0

To work with a PDF that has form fields in your React app, you can use react-pdf for displaying the PDF and a library like pdf-lib to modify and generate the filled PDF. react-pdf is mainly for viewing PDFs, but it doesn't allow you to edit or extract the filled form data. By combining it with pdf-lib, you can fill out the form fields and get the updated PDF.

https://www.npmjs.com/package/pdf-lib (link to pdf-lib)

Here’s a simple guide to help you get the updated PDF buffer: Steps:

Render the PDF: Use react-pdf to display the PDF.
Fill the form: Use a library like pdf-lib to modify the form fields in the PDF.
Generate the updated PDF: Save the filled PDF and send it to the server for storage.

answered Dec 7, 2024 at 4:37

jerick cabarloc

11 silver badge

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Download PDF using react-pdf

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related