Posting a filled in pdf form back to server for processing Itext7 .net core

34 Views Asked by At

Hoping I can get some help with a problem I have been stuck on for too long.

I have a project that I need to add pdf forms to. In a high level spec, I need to prepare a pdf form based on a pdf document this exists on the server, then show it on a page. Then a user can fill in the form on the webpage and send it back for the server to process. My thought process is: on the server, fetch the document and over lay some form fields where the need to be, then output as a byte array that is used on the razor page in an embed or object tag. the user clicks in the forms fields and fills in the data. When ready, the user can click a button to post the form back to the server (actually, they are supposed to sign the document but I couldn't get that going either so I'm tackling this for now) . The server receives the form and I do what I need with the form fields data, flatten the form and save it as a completed document. Here's the problem. When I send the form back to the server, the values of the form fields are empty. I need to do it this way as i need to use 1 html page that can handle multiple types of form, so building html forms are not an option. After some read up, it turns out I probably cant just turn the pdf into a a base 64 and send it back as javascript can access the pdf form data. So how should this work. does any one know an sure-fire way to send back the form from the browser with all form field's values intact? here what I've tried with no luck :

  1. posting the form back to the server with a standard form post (receives the pdf but no form values).
  2. hijacking the post event in js then turning the pdf into base 64 before posting (receives the pdf but no form values).
  3. trying to add a button in the pdf form that posts back to my page controller or api controller (this doesn't even hit a controller).
  4. Ive tried examples from various sites and the itext book to no avail. There doesnt seem to be a 'this is how one should post forms back for processing after manual completion'

Here some of my code snippets for things I've tried with html submit, js submit and the pdf embedded submit if it help. I'm using .net core with razor pages, and IText7 (8.0.3). Any help is greatly appreciated as I've spent at least a day longer than needed to move forward here.

create the pdf and include a submit button (basic for test)

            byte[] GeneratePdf()
            {
                using (var memoryStream = new MemoryStream())
                {
                    using (var pdfReader = new PdfReader("C:/KnowlesDVLADocs/Driver Declaration Form.pdf"))
                    {
                        using (var pdfWriter = new PdfWriter(memoryStream))
                        {
                            using (var pdfDocument = new PdfDocument(pdfReader, pdfWriter))
                            {
                                // Get the first page of the existing PDF document
                                var page = pdfDocument.GetFirstPage();

                                // Create a text field to fill in 
                                var textField = new TextFormFieldBuilder(pdfDocument, "name").SetWidgetRectangle(new iText.Kernel.Geom.Rectangle(100, 500, 200, 20)).CreateText();
                                // Add the text field to the page
                                var form = PdfAcroForm.GetAcroForm(pdfDocument, true);
                                form.AddField(textField, page);
                                
                                // Create a submit button to post back to the server
                                PdfButtonFormField button = new PushButtonFormFieldBuilder(pdfDocument, "reset")
                                    .SetWidgetRectangle(new iText.Kernel.Geom.Rectangle(479, 594, 45, 15)).SetCaption("Submit")
                                    .CreatePushButton();
                                button.GetFirstFormAnnotation()
                                    .SetAction(PdfAction.CreateSubmitForm(@"/index/saveSignature", null, PdfAction.SUBMIT_HTML_FORMAT | PdfAction.SUBMIT_COORDINATES));
                                form.AddField(button);
                                
                            }
                        }
                    }
                    return memoryStream.ToArray();
                }
            }

            PdfBytes = GeneratePdf();

Show the form on the Razor Page. add a form submit to the page for testing a client post too.

<div>
    <object id="pdfObject" data="data:application/pdf;base64,@Convert.ToBase64String(Model.PdfBytes)" type="application/pdf" width="100%" height="600px">
        <p>Your browser does not support embedded PDFs.</p>
    </object>
</div>

<form id="pdfForm" asp-page-handler="SaveSignature" method="POST">
    <!-- Hidden input fields to hold PDF data and filled PDF data -->
    <input type="hidden" id="pdfData" name="pdfData" value="@Convert.ToBase64String(Model.PdfBytes)">
    <textarea id="filledPdfData" name="filledPdfData" style="display: none;"></textarea>
    <button id="submitButton" type="submit">Submit PDF</button>
</form>```
 
Add some js to hijack the submit to test this way too (commented out to test plain html submit). 
 
document.getElementById('submitButton').addEventListener('click', function () {

    var pdfEmbed = document.getElementById('pdfEmbed');
    if (pdfEmbed) {
        // Get the data of the PDF from the <embed> element
        var filledPdfData = pdfEmbed.src; // Assuming src attribute contains filled-in PDF data

        // Set the filled-in PDF data as the value of the hidden input field
        document.getElementById('filledPdfData').value = filledPdfData;
        document.getElementById('signatureForm').submit();
        // Submit the form
        document.getElementById('pdfForm').submit();
    }
0

There are 0 best solutions below