Question T12849
Visible to All Users

SurveyJS PDF Creator questions - Render Text and Images in the Header and Footer section

created 2 years ago

Hello:

I have two questions related to SurveyJS PDF:

  1. Instead of throwing the PDF generated by the SurveyJS PDF to the browser, we would like to send the pdf data to our server for storage and so we can email a copy of the file to the user as an attachment. How can this be accomplished?
  2. In the PDF, in addition to the contents from the survey we would like to add a few other things at the bottom of the PDF (example a date/time stamp and some static text). Is it possible to do this and if so how?

Thank you for your support!

Answers approved by surveyjs Support

created 2 years ago

Hello Prashant,

  1. You can use the SurveyPDF Generator to generate a PDF document in any required format: Blob, Base64 URL, or Raw PDF. Generate a PDF document and further process it as required: save to your storage or email it to users.

  2. You can use the onRenderFooter event and override PDF footer rendering and render custom text.

JavaScript
surveyPDF.onRenderFooter.add((_, canvas) => { canvas.drawText({ text: "Created by SurveyJS PDF Generator", fontSize: 10 }); canvas.drawText({ text: canvas.pageNumber + "/" + canvas.pageCount, fontSize: 10, horizontalAlign: "right", margins: { right: 12 } }); });

For more details, please refer to the following demo: Add Header and Footer to a PDF Document

Let me know if you have any questions or require further assistance.

    Show previous comments (2)

      Something like the attached, if possible, would be great.

      Thanks,
      Prashant

        Hello Prashant,
        Thank you for the update.

        The onRenderHeader/onRenderFooter functions enable you to render an image and text in a PDF document's page header and footer area.

        The canvas.drawImage() and canvas.drawText() functions accept the IDrawImageOptions and IDrawTextOptions configuration objects, where you can define the coordinates for the image and text.

        To render a background, use HTML5 Canvas API to create an image of a specified color rectangle and convert it to a base64 string:

        JavaScript
        const width = canvas.rect.xRight - canvas.rect.xLeft; const height = canvas.rect.yBot - canvas.rect.yTop; const imgcanvas = document.createElement('canvas'); imgcanvas.width = width; imgcanvas.height = height; const ctx = imgcanvas.getContext('2d'); ctx.fillStyle = '#F2F2F2'; ctx.fillRect(0, 0, width, height); const base64String = imgcanvas.toDataURL(); await canvas.drawImage( { base64: base64String, horizontalAlign: "left", width: width, height: height });

        To render a multi-line text, configure the rect object for each text line and call the drawText function for each text line. If you wish to render the bold text, call the drawText() function and enable the IDrawTextOptions.isBold option:

        JavaScript
        canvas.drawText({ text: "Created by SurveyJS", isBold: true, fontSize:8, horizontalAlign: "left", rect: { xLeft: canvas.rect.xLeft, xRight: canvas.rect.xRight, yTop: 0, yBottom: canvas.rect.yTop + 10 }, margins: { left: (canvas.rect.yBot - canvas.rect.yTop) * 1.5 } }); canvas.drawText({ text: "User Name: Jane Doe", isBold: false, fontSize: 6, horizontalAlign: "left", rect: { xLeft: canvas.rect.xLeft, xRight: canvas.rect.xRight, yTop: canvas.rect.yTop + 14, yBottom: canvas.rect.yBottom }, margins: { left: (canvas.rect.yBot - canvas.rect.yTop) * 1.5 } });

        To align the text to the right side of a header area, use the horizontalAlign property:

        JavaScript
        var nowDate = new Date(); var date = nowDate.toLocaleDateString(); canvas.drawText({ text: 'Completed: ' + date.toString(), fontSize: 10, horizontalAlign: "right", margins: { right: 12 } });

        Example

        I hope this helps. Please let me know if you have any questions or require further assistance.

          Hello Prashant,
          Thank you for the update. I created the following issues in this regard:

          Please refer to these threads for further information.