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.

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 and logoWidth
  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.

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.