Add Header and Footer to a PDF Document
You can improve the appeal of your PDF forms or simply make their contents more clear to respondents by customizing their header and footer with annotations, page numbers, a brand logo, titles, and more. This example shows how you can add a brand logo or fully custom header and footer to a PDF form.
Add a Brand Logo to Your PDF Form
SurveyJS Form Library allows you to add a logo to your survey on a web page. This logo can be exported to PDF without additional configuration.
To add a logo, assign a Base64 or URL string value to the
logo property in the survey JSON schema. You can also specify other logo parameters:
Set the height and width of a logo in CSS-accepted values.
Specifies how a logo should be resized to fit its container.
Specifies the position of a logo relative to the survey content.
This example demonstrates how to embed a Base64 logo in a survey JSON schema and display the logo in the survey header. Click "Save as PDF" to export a PDF form with the logo.
Customize Header and Footer in a PDF Form
With SurveyJS PDF Generator, you can create a fully custom header and footer for your PDF form. To do this, implement the
onRenderFooter event handlers. They accept a
DrawCanvas object as the second parameter. Use this object to draw images or text within a PDF page header or footer.
In this demo, a
drawImage(), renders a SurveyJS logo in the PDF page header. Another
drawText(), renders page numbers and additional information in the footer.