PDF Form fill using javascript library

Question

I'm building a web app in which I need to fill PDF forms dynamically. At the end result I want the editable PDF forms with Dynamically set values.

I had used PDFTK to fill the pdf forms in PHP but I'm unable to run it on Live server and does not meet the requirement of Editable PDF form Output. That's why I'm finding the JavaScript library so I can fill PDF forms remaining as PDF form Editable.

Ob

Please provide enough code so others can better understand or reproduce the problem. – Wrens

Answer 1

This literally drove me insane about 2 months ago. So basically, there are 2 approaches here:

1. Have a backend that you'd send values to, and it would fill out the PDF, upload it somewhere and send you a link. Or just send you the file itself as a blob. (fail-safe if all the other solutions fail. Way more robust from my experience)
2. What you're looking for-- a frontend solution that would take user input, fill out a PDF template that you prepared beforehand.

I implemented both, but since you're more interested in option 2, here's how I did it:

I used this package

https://github.com/phihag/pdfform.js/blob/master/README.md

Alongside with a PDF form template. The way I filled it out was by passing an array of values that match up the PRF form's fields names!

Like this:

let filledPdf = pdfform().transform(arrayBuffer, {"field1Name":[field1Value],"field2Name" : [field2Value]  })
                const blob = new Blob([filledPdf], {type: "application/pdf"});

            setBlobContents(blob);

            pdfFile = blob;

            setBlobLink(URL.createObjectURL(blob))

It should be straight forward if you look at the documentation of the link I provided.

Teakwood

How to implement approach 1? – Inheritrix