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. Read more...
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:
logoHeight
andlogoWidth
Set the height and width of a logo in CSS-accepted values.logoFit
:"contain"
(default) |"cover"
|"fill"
|"none"
Specifies how a logo should be resized to fit its container.logoPosition
:"left"
(default) |"right"
|"none"
Specifies the position of a logo relative to the survey title.
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 onRenderHeader
and 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 DrawCanvas
method, drawImage
(), renders a SurveyJS logo in the PDF page header. Another DrawCanvas
method, drawText()
, renders page numbers and additional information in the footer.