Creating Interactive Form Elements

When the HTML to PDF converter renders HTML with interactive elements such as a textbox, it only renders a static visual representation of the textbox, not an actual interactive textbox. As a result, a typical textbox will be rendered as a rectangle box in the final PDF and user will not be able to enter anything in the box.

Because PDF file does support interactive forms, it is possible to render actual textbox in a PDF file with some additional code. Yet due to limitation of PDF file and the almost unlimited versatility of JavaScript in a Web page, it is not possible to duplicate all interactive features implemented in a Web page in a PDF file. The remaining of this topic outlines basic steps that you can use to duplicate simple interactive form elements in a PDF file.

  1. Convert the HTML to a PdfDocument object and retain the result HtmlToPdfResult object:
    PdfDocument doc = new PdfDocument();
    HtmlToPdfResult result = HtmlToPdf.ConvertUrl(url, doc);
  2. Use the HtmlToPdfResult object to find out the location and size of an input element that you wish to duplicate. For example, the following code get the location and size of "textbox1":
    //Get the location and size of the textbox
    EO.Pdf.HtmlElement element = result.HtmlDocument.GetElementById("textbox1");
    PdfPageLocation location = element.Location;
    System.Drawing.SizeF size = element.Size;
  3. Use the PDF Creator interface to create a PDF textbox with the location and size information acquired from the previous step:
    //The following code creates an AcmTextBox with
    //the location and size information acquired from the
    //previous step
    
    //Must use an AcmBlock for absolute position
    //since an AcmTextBox can not be absolute positioned
    EO.Pdf.Acm.AcmBlock block = new EO.Pdf.Acm.AcmBlock();
    block.Style.Left = location.X;
    block.Style.Top = location.Y;
    
    //Create the AcmTextBox with the right size and add
    //it as a child element of the AcmBlock
    EO.Pdf.Acm.AcmTextBox textbox = new EO.Pdf.Acm.AcmTextBox();
    textbox.Style.Width = size.Width;
    textbox.Style.Height = size.Height;
    textbox.Name = "textbox1";
    block.Children.Add(textbox);
    
    //Render the AcmTextBox into the page
    EO.Pdf.Acm.AcmRender render = 
        new EO.Pdf.Acm.AcmRender(
        location.Page,  //The same page as the original textbox1
        0f,             //This argument and the next argument ensures
                        //that no additional margin/paddings are
                        //added since the location value returned
                        //from element.Location are absolute values
                        //from the top/left edge of the page
        new EO.Pdf.Acm.AcmPageLayout(new EO.Pdf.Acm.AcmPadding()));
    render.Render(block);
  4. Save the PdfDocument object:
    doc.Save(pdf_file);

Now the result PDF file should contain a functional textbox at exactly the same location of the original textbox as in the HTML file.