Get pdf bytes from blob after filling out PDF form fields (editable PDF)

[sandeep2244]

What were you trying to do?

Is it possible with this library to allow the user to edit form fields in a PDF, then instead of downloading the modified file, export it as a blob so that it can be uploaded to a server. ?

How did you attempt to do it?

I have render PDF as Blob url into Iframe.

I filled test input of pdf with some value.

Now i want to capture whole updated pdf as a byte array or bas64 to sent it to server.

What actually happened?

I checked Blob on submit pdf to server, Its unchangeable.

Here is code.

` const submitPdf = async () => { debugger;

console.log( pdfBytesInfo )  

const url = pdfInfo
const blobObj = await fetch(url).then(res => res.blob())
console.log(blobObj.arrayBuffer())
const arrayBuffer = await fetch(url).then(res => res.arrayBuffer())
const pdfDoc = await PDFDocument.load(arrayBuffer)
pdfContentToParent(pdfBytesInfo)
}

`

What did you expect to happen?

Should capture pdf form updated value.

How can we reproduce the issue?

const PdfForm = ({pdfPath, pdfContentToParent}) => {

    const [pdfInfo, setPdfInfo] = useState("")
    const [pdfBytesInfo,setPdfBytesInfo ] = useState([])
    useEffect(() => {
        intializePdf();
    },[])

    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);
        setPdfBytesInfo(blobObj.arrayBuffer());
        setPdfInfo(docUrl);
        }

    const submitPdf = async () => {
    const url = pdfInfo
    const blobObj = await fetch(url).then(res => res.blob())

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

    return (
    <>
    {<iframe src={pdfInfo} style={{position: "relative", height: "700px", width: "96%"}} type="application/pdf" />}
    <Button
                            type="submit"
                            fullWidth
                            variant="contained"
                            sx={{ mt: 2 }}
                            onClick={()=>submitPdf()}
                        >
                            Submit
                        </Button>
    </>
    )
}

Version

latest

What environment are you running pdf-lib in?

Browser, Node

Checklist

• [X] My report includes a Short, Self Contained, Correct (Compilable) Example.
• [X] I have attached all PDFs, images, and other files needed to run my SSCCE.

Additional Notes

No response

[AYGTX]

any updates here?

[cre8]

@sandeep2244 I don't think this is possible (but haven't tried it yet): the iframe has no bi-directional binding: meaning you can add the PDF to it, but you will not be able to access the filled pdf done by the user.

when you use a library like: https://www.npmjs.com/package/ngx-extended-pdf-viewer it will load the pdf in a custom viewer where you have a bidirectional binding.

[sandeep2244]

@cre8 , Ohk got it. I checked above mention lib, is it compatible with angular12 ? Do we have any vanila JavaScript , it would be helpful to use with any JS framework or library.

[cre8]

@sandeep2244 I think it should. If you google you will find some libraries for pdf viewer. A standalone lib to get a PDF is pdf.js, pdf-lib is good for creation and manipulating pdfs. But they do not have some kind of visual editor.

[100le]

@sandeep2244 , i solved the same problem by using the PDF Embed API from Adobe. Please check this Guide where you can register a SAVE_API callback that will handle the edited PDF Blob and you can define your own 'autoSaveFrequency' when the callback gets called (if there is any change in the PDF).

Hope this helps.

[abdalhalimalzohbi]

I am facing the same issue. Any updates?