CODEWITHSUNDEEP
javascriptreactjsreact-hooksreact-pdfreact-pdf-viewer
Paritosh Mahale
Paritosh Mahale

Reputation: 1306

Download PDF using react-pdf

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?

Upvotes: -1

Views: 180

Answers (1)

jerick cabarloc
jerick cabarloc

Reputation: 1

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:

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

Upvotes: 0

Related Questions