A lightweight Form.io application that renders form submissions as HTML before being converted to PDF.
This simple Form.io application is used by the PDF Server to generate PDFs from form submissions. Using this library, you can customize the submission PDFs that are generated by the PDF server.
Becuase formio-viewer is mounted by the Form.io PDF Server, this library is not available via a package manager such as NPM or yarn. To use it, clone the repository.
# if using SSH
git clone git@github.com:formio/formio-viewer
# if using HTTPS
git clone https://github.com/formio/formio-viewerYou can now install dependencies as normal.
# if using npm
npm install
# if using yarn
yarnOnce you've made the desired modifications to the viewer, build the application.
# if using npm
npm run build
# if using yarn
yarn buildYou can now mount the dist folder at the endpoint of your choice and point the PDF Server to it for generating PDF submissions either by adding the URL of your custom viewer to the Form Settings (on a form-by-form basis) or by setting the PDF Server's FORMIO_VIEWER environment variable to the URL of your custom viewer.
PLEASE NOTE that any modification of this library beyond adding basic HTML/CSS and/or custom assets is an advanced use case and is not recommended for users just starting out with the Form.io platform.
In this example, we'll add the Form.io logo to all of our PDF submissions.
First, we'll update index.html to include the logo. Since formio-viewer currently uses Bootstrap 4.x by default, we'll use Bootstrap's built in layout utilities and navbar class. Note that the logo is being served from the assets directory.
<!-- index.html -->
<!-- ... -->
<body>
<div class="container-fluid main pf" id="main">
<nav class="navbar navbar-light bg-light">
<div class="d-flex"><h6>Our Custom </h3>
<img src="assets/logo.png" width="100" alt="The Form.io Logo" />
<h6> Viewer!</h6>
</div>
</nav>
<!-- ... -->
</div>
</body>
<!-- ... -->After building our new viewer, we'll mount a simple HTTP server in the dist directory to check our work.
yarn build && cd dist && python -m http.serverLoad a form into the text input (e.g. https://examples.form.io/example) and click "Show Form." You should see our new navbar component! Now each PDF submission generated using your custom viewer will contain this component.