Question T12920
Visible to All Users

Enhancements to PDF export styling

created 2 years ago

Hello, we are really interested in starting to use your export to PDF function for documentation, however we have noticed a few styling issues, when we export our surveys to pdf. I have summarized all of them in the spreadsheet below, if you could let me know if any of the solutions mentioned are possible, that would be fab.
Thank you,
Klaudia

Comments (1)

    Hello Klaudia,
    I appreciate the summary. Please let me review it in detail. I'll get back to you shortly.

    Answers approved by surveyjs Support

    created 2 years ago (modified 2 years ago)

    Hello Klaudia,
    Please accept my apologies for the delayed reply. I reviewed your summary (great job, really appreciate it!). I created a demo using the recent version of SurveyJS libraries. Please refer to my comments below.

    Boolean

    Inconsistenses between how answers are portrayed in pdf, when 'yes' the answer says yes and the box is ticked, when no the answer says no and the box isn't ticked, when no answer chosen there is just a box unticked with no word

    Please run the following demo: https://plnkr.co/edit/M7SXMHlTkaD1Zdgd.

    I got the following results:

    • No option is selected
      Clipboard-File-1.png

    • 'Yes'/'No' is selected:
      Clipboard-File-2.png
      Clipboard-File-3.png

    According to your screenshots, you got other results. Please clarify how to reproduce this.

    Image Picker

    When we have an image picker, the pdf does not display images nor any information about what images containes (e.g. alt text). It takes lots of space and gives no information about the answer given

    The SurveyPDF engine uses the jsPDF MIT library to generate a PDF document. It appears that jsPDF is unable to access images if an image server doesn't have a allow cross origin header (CORS policy). You may notice the following error in the browser console:

    Call Stack
    Access to image at 'https://surveyjs.io/Content/Images/examples/image-picker/camel.jpg' from origin 'https://5djtz7.csb.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

    Please consider hosting images on a server which enables the cross origin policy.

    I've created the following code sandbox sample and confirmed that a PDF contains images if they are stored in a survey JSON as base64 encoded files: https://plnkr.co/edit/VneybklJLEyI1eLP.
    Clipboard-File-4.png

    HTML

    Html text does not display very clear, it looks more like a low quality image

    SurveyJS PDF Generator supports two HTML export modes which is defined by the htmlRenderAs option: the standard and image modes.

    In standard mode, HTML content is exported as text. We use the jsPDF's fromHTML function to export HTML to PDF. Consider this example: https://plnkr.co/edit/4VOLXMycK6poJD4c.

    Unfortunately, SurveyJS PDF Generator may not correctly handle complex HTML content. If you wish to export HTML to PDF in the same way as it's displayed in a survey, we usually suggest exporting HTML as an image. In this case, HTML appears just like in survey runner. I believe this is the output you got: HTML exported as an image.

    If you require to export some complex HTML content to PDF as text, you might want to consider using a different library. For instance, you can use an CKEditor and its "Export to PDF" feature.

    Expression (read only)

    This type of question on pdf displays as a typed answer was missing but there is no box to type when completing the survey

    In PDF, an Expression question is actually displayed as an input field without an option to enter the text (https://plnkr.co/edit/zLkKUFTmx7hQGamG)::)
    Clipboard-File-5.png

    For me to move forward, I need to clearly understand the usage scenario. You purposed the following option: to hide the box below the Expression question's title.

    Would you please elaborate on the overall task? Do you wish to use this type of a question without the actual expression value, and therefore, you wish to hide the input field?

    Image

    When there is an image under the question, the image doesn't transfer but the pdf displays big whitespace where the image would be

    I believe this is the same issue related to the CORS policy. Do you wish to display images in PDF? If so, enable the cross origin policy on your image server; alternatively, embed images as base64 encoded strings to a survey JSON.

    Would you please clarify what would be the desired output? Do you wish to preserve images in PDF or would you rather hide image questions in PDF?

    I will be happy to work with you and help you further. I look forward to your reply.

    Thank you,
    Jane
    The SurveyJS team

      Show previous comments (2)

        Hi Jane, thank you so much for all of your support!

        I have taken your comments to the team to fix/consider, but one more issue was brought to my attention.

        It's for the matrix (multiple choice) type of question- during export the matrix widens so it doesn't fit on the page, as per the picture below: Clipboard-File-1.png

        Is one of your previous solutions going to fix this as well, or is there another issue here?

        Thank you

          Hello Klaudia,
          Jane is out of the town today. She will reply tomorrow.

          Thank you,
          Andrew
          SurveyJS Team

            Hello Klaudia,
            Please accept my apologies for the delayed reply.

            For a Multiple-Choice Matrix, you can define the rowTitleWidth and column.maxWidth properties to adjust matrix layout and decrease the column width.

            Please let me know if it helps.