Displaying PDF Files

You can display PDF files in your forms.

Tutorials

Local PDF file

To display a PDF file inside the form:

1. Drag and drop the HTML Element component into the Form Designer.
2. In the Content field of the Display configuration tab, enter <iframe href="/file://path-to-file"></iframe>, where path-to-file is the local path to the file you want to read.
   For <iframe> tags we recommend using closing tags </iframe> instead of self-closing /> tags.
3. Set the height and width of the PDF file in your form by adding the width and height attributes in the <iframe> tag.
   For example, to display the PDF file located at C:\Folder\doc.pdf formatted as 350x500 pixels (width x height) , enter the following snippet:

<iframe href="/file://c:\folder\doc.pdf" width=350 height=500></iframe>

Dynamic PDF File

To render a PDF file dynamically:

1. Set the PDF file path as a variable in the FormFieldsCollection (Studio) and name it pdf.
2. Navigate to the Display tab of the HTML Element component (Form Designer).
3. In the Content field, add <iframe href={{data.pdf}} width=350 height=500></iframe>.
   You can set the full HTML tag containing the PDF file as a variable. In this case, bind the data using only {{data.pdf}} in the Content field.

4. Under the Content field, check Refresh On Change.