Edit pdf embedded in the browser and save the pdf directly to server

Question

I have this workflow.

1. Load a pdf containing form fields into the browser (pdf in iframe or div).
2. A user fills it out
3. A user click 'Submit' button (in another div) to save the pdf.

What I would like to do in #3 is to collect all the data associated with the form fields and save the data to the database table. I don't want a user to save the pdf to his/her local computer and upload it to the server. I would like to make it more user-friendly.

I am going to use Java/JSP/Servlet in the server-side. I looked into the itext which seems to be popular/well-known for handling a pdf file, but itext seems to be used for generating/editing a pdf, but I am not sure if there is any way to have a feature being able to edit a pdf embedded in the browser and save to the database.

Is there any adobe software providing some kind feature which I can inject some kind of script which can capture a user's submit? I know that PDF is not a front-end scripting language, but i am just asking.

I was going to create a HTML form which looks like this PDF and populate it into the PDF when a user clicks 'submit' button, but as I said, I would like to make it more user-friendly.

I'd appreciated if there is anybody who has seen this type of feature or has done it gives me some resources or tip.

Answer 1

My assumption: you have an interactive PDF document with AcroForm fields similar to submit_me.pdf:

The main difference, is that I have different buttons on the form:

• POST will post the data I fill out as if the PDF was an HTML form,
• FDF will post the data to the server in the Forms Data Format, a format that is very similar to PDF, but that only contains the data pairs, not the actual form,
• XFDF will post the data to the server in the XML Forms Data Format, which is the XML version of the Forms Data Format.
• RESET will reset all the fields to their initial value.

The SubmitForm example shows how the buttons were added to an existing form. Note that there are more options than the ones described in this example.

For instance:

• Instead of using the POST method, you can also use GET by tweaking some of the parameters,
• You can also submit the complete PDF (data + form) to the server, but this will only work if the end user has Adobe Acrobat as plug-in. This won't work if the plug-in is merely Adobe Reader,
• ...

To show you what to expect when you commit a form, I wrote the ShowData servlet. This servlet returns the bytes that are sent to the server.

In case of a POST:

personal.loginname=jdoe&personal.name=John+Doe&personal.password=test&personal.reason=reason&post.x=29&post.y=7

Note that I also defined the button in such a way that the coordinate of my click is passed to the server. You probably don't need this.

In case of FDF:

%FDF-1.2
%âãÏÓ
1 0 obj
<</FDF<</Fields[<</T(FDF)>><</Kids[<</T(loginname)/V(jdoe)>><</T(name)/V(John Doe)>><</T(password)/V(test)>><</T(reason)/V(Reason)>>]/T(personal)>>]/ID[<EF0089E16ED50F11CB6057A700B9046E><1205D069D1D6AE37665B6FF7EEA65414>]>>/Type/Catalog>>
endobj
trailer
<</Root 1 0 R>>
%%EOF

In case of XFDF:

<?xml version="1.0" encoding="UTF-8"?>
<xfdf xmlns="http://ns.adobe.com/xfdf/" xml:space="preserve"
><f href="http://itextpdf.com:8180/book/submit_me.pdf"
/><fields
><field name="XFDF"
/><field name="personal"
><field name="loginname"
><value
>jdoe</value
></field
><field name="name"
><value
>John Doe</value
></field
><field name="password"
><value
>test</value
></field
><field name="reason"
><value
>Reason</value
></field
></field
></fields
><ids original="EF0089E16ED50F11CB6057A700B9046E" modified="1205D069D1D6AE37665B6FF7EEA65414"
/></xfdf
>

In an ideal world, this would be your solution. It is described in ISO-32000-1 which is the world-wide standard for PDF. However: many people started using crappy PDF viewers that do not support this functionality, so if you want to use this solution, you'll have to make sure that people use a decent PDF viewer as their browser plug-in.