Fetch Editable Updated Content of Iframe from Blob URL with PDF-LIB

Viewed 217

I am trying to implement below feature using ReactJS and PDF_LIB.

Load PDF in Iframe from source URL -> PDF is editable test fields and then submit updated PDF to nodejs Server.

I achieved : I render Iframe in ReactJS. I used PDF_LIB js library to load PDFDocument and create Blob url for local change.

Issue: On submit, Didn't get updated PDF content from Blob URL.

how can we get updated content from same Blob URL ?

Below code is for initialization of PDF.

const intializePdf = async () => {
        const url = 'https://pdf-lib.js.org/assets/with_update_sections.pdf'
        const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
        const pdfDoc = await PDFDocument.load(arrayBuffer)
        const pdfBytes = await pdfDoc.save();
        const blobObj = new Blob([pdfBytes], { type: "application/pdf" })
        const docUrl = URL.createObjectURL(blobObj);
        setPdfInfo(docUrl);
        }

Below code for Submit PDF to Server

const submitPdf = async () => {

const url = pdfInfo
const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
const pdfDoc = await PDFDocument.load(arrayBuffer)
pdfContentToParent(await pdfDoc.save())
}

On above code of "pdfDoc" is still don't have any updated fields.

0 Answers
Related