Question T14496
Visible to All Users

SurveyJS PDF Header first page and footer last page only

created a year ago

Hi, is it possible for the header only shown on the first page and the footer shown on the last page only. Please check the image I attached.
Screenshot 2023-09-05 at 4.12.48 PM.png

Answers approved by surveyjs Support

created a year ago

Hello Izzudin,
Sure, it is possible. To display the header and footer and the beginning and end of a form, you can check the canvas.pageNumber property value within the onRenderHeader/onRenderFooter events. Please consider the following demo: View Demo.

JavaScript
surveyPDF.onRenderHeader.add(async function (_, canvas) { if (canvas.pageNumber != 1) return; // Render a header await canvas.drawImage({...}); }); surveyPDF.onRenderFooter.add((_, canvas) => { if(canvas.pageNumber != canvas.countPages) return; // Render a footer canvas.drawText({...}); });

Let me know if you have any questions.

    Comments (2)

      Hi, still in the same topic, as currently I understand that the surveyJS PDF only support to append image and text, hence

      • is it also actually possible to append html code on the header/footer?
      • And for the footer, can it be placed on the end of last question, not on the bottom margin of the last page?

      Please see my image above and below is the example of the html code I want to append. What I attempt to do is, the header and the footer are dynamic which my user can changes them using html code.

      JSON
      <table class="MsoNormalTable" style="width: 1000; background: white; border-collapse: collapse; mso-yfti-tbllook: 1184;" border="0" width="1000" cellspacing="0" cellpadding="0"> <tbody> <tr style="mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes;"> <td style="border: none; border-bottom: solid #DDDDDD 1.0pt; mso-border-bottom-alt: solid #DDDDDD .75pt; padding: 6.0pt 6.0pt 6.0pt 6.0pt;" valign="top"> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Title here</span><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Additional title here.</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Paragraph 1</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Paragraph 2</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">&nbsp;</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">___________________________________&nbsp;</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Owner Signature&nbsp;</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">___________________________________</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">Date</span></p> <p class="MsoNormal" style="margin-bottom: 0in; line-height: 15.0pt;"><span style="font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;">&nbsp;</span></p> </td> </tr> </tbody> </table>

        Hello Izzudin,
        Thank you for the update. The canvas object used to render the content within a header and footer provides API to render an image and text:

        Unfortunately, the canvas class doesn't provide API to render HTML in PDF. If you wish to display HTML in a SurveyPDF form, you can programmatically create HTML questions and add them to a SurveyJS PDF instance.

        Regarding the second task: if you wish to place the footer after the last survey question, you can simply add a question (e.g., an HTML question) to the SurveyJS PDF instance. Use the page.addNewQuestion function to create a new question and add it to a required position. Please consider this demo: View Demo.

        JavaScript
        const surveyPDF = new SurveyPDF(json, options); let htmlQuestion = surveyPDF.pages[0].addNewQuestion("html", "heading", 0); const htmlContent = `<table class=\"MsoNormalTable\" style=\"background: white; border-collapse: collapse; mso-yfti-tbllook: 1184;\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tbody>\n<tr style=\"mso-yfti-irow: 0; mso-yfti-firstrow: yes; mso-yfti-lastrow: yes;\">\n<td style=\"border: none; border-bottom: solid #DDDDDD 1.0pt; mso-border-bottom-alt: solid #DDDDDD .75pt; padding: 6.0pt 6.0pt 6.0pt 6.0pt;\" valign=\"top\">\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Title here</span><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Additional title here.</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Paragraph 1</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Paragraph 2</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">&nbsp;</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">___________________________________&nbsp;</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Owner Signature&nbsp;</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">___________________________________</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">Date</span></p>\n<p class=\"MsoNormal\" style=\"margin-bottom: 0in; line-height: 15.0pt;\"><span style=\"font-size: 9.0pt; font-family: 'Verdana',sans-serif; mso-fareast-font-family: 'Times New Roman'; mso-bidi-font-family: 'Times New Roman'; color: #333333;\">&nbsp;</span></p>\n</td>\n</tr>\n</tbody>\n</table>`; htmlQuestion.html = htmlContent; let lastPage = surveyPDF.pages[surveyPDF.pageCount - 1]; let footerQuestionIndex = surveyPDF.getAllQuestions().length; let footerQuestion = surveyPDF.pages[ surveyPDF.pages.length - 1 ].addNewQuestion("html", "footer", footerQuestionIndex); footerQuestion.html = htmlContent;

        Refer to the following help topic for more information on how to programmatically create a survey model: Create or Change a Survey Model Dynamically.

        I hope this example can help you. Please let me know if you have any further questions.