Question T14181
Visible to All Users

html formatting issue when generating pdf

created a year ago (modified a year ago)

We are creating a node.js service to generate Survey PDFs

Everything works so far apart from some formatting issues with HTML questions.

HTML that normally would not create a line break such as <b></b> are creating a line break.
Clipboard-File-1.png

JSON
{ "type": "html", "name": "GP connect description", "html": "<p style=\"font-size:16px\"> For many patients your Consultant Dermatologist can access your GP record to obtain the full picture surrounding your skin problem, but they require your consent to do so. Your record is only visible at the time your consultant reviews your case. No information is saved or shared more widely.<br><br></p>\nUnfortunately not all GP records are connected, so please complete <b>both the assessment below and the general health questions </b> so that we have all the background information needed to make a diagnosis." }

It also seems to be ignoring styling. In the following example the font for "IMPORTANT NOTE" should be red:
Clipboard-File-2.png

Code
{ "type": "html", "name": "questionE2a", "visibleIf": "{questionG2} anyof ['item1', 'item2', 'item4']", "html": "<h4><b style=\"\"><font color=\"#ff0000\">IMPORTANT NOTE: </font></b></h4><h4><font color=\"#636363\">If the problem is in a sensitive area, it is your choice if you wish to upload photo(s). Your photos will only be visible to clinicians involved with your case. If you are uncomfortable with this, please do not upload a photo. </font></h4>" }
Show previous comments (3)

    Hi Ben,
    Just want to inform you that we published an example on how to export a sample survey on Node.js environment: Create PDF Forms in Node.js.

    Please take note of a limitation regarding the question types unsupported on Node.js.

    We hope this example may help. Should you have any questions or require further assistance, we are here to help.

      Hi Jane,

      Thank you for the update.

      Are there plans to support HTML questions in future versions?
      Or any known work around's?

        Hi Ben,
        You're always welcome.

        Regarding HTML: would you please clarify which type/kind of HTML you would display in a SurveyJS PDF document? If possible, share some illustration/example.

        I look forward to your reply.

        Answers approved by surveyjs Support

        created a year ago

        Hello Ben,
        We researched this task. It appears that the jsdom library applies specific styles to <b> tags: https://github.com/jsdom/jsdom/blob/master/lib/jsdom/browser/default-stylesheet.js#L622-L624.

        To handle this task, apply the display: inline CSS style to the <b> element.

        JavaScript
        const jsdom = require("jsdom"); const { JSDOM } = jsdom; const SurveyPDF = require("survey-pdf"); const { window } = new JSDOM(`...`); global.window = window; global.document = window.document; const json = { "title": "Sample Survey", "elements": [ { "type": "html", "name": "introMsg", "html": '<p>Hello <b style="display:inline">World!</b><p>' } ] } const surveyPDF = new SurveyPDF.SurveyPDF(json, { useCustomFontInHtml: true, htmlRenderAs: "standard" }); surveyPDF.save("survey-result.pdf");

        Clipboard-File-1.png

        Please test the attached sample.

        Should you have any further questions, we are here to help.

          created a year ago

          Hi Ben,
          I discussed this task with our developers. It appears it's actually possible to render HTML (in standard mode) in a SurveyJS PDF document in Node.js environment with the help of a jsdom package. Install this package to your application and you'll be able to render HTML within a PDF document. However, please note that the SurveyJS PDF library may not handle HTML documents of a complex structure. For instance, underline, lists may not be correctly rendered. If you wish to format texts in surveys using some relatively simple HTML formatting, I believe it may work. Please refer to the attached demo.

          During our research, we also confirmed that the jsdom package made it possible to export Signature Pad questions. Image questions with Base64-encoded images are also supported.

          I hope this information and demo may help you. Let me know if you have any further questions.

          Thanks

            Comments (2)

              Hi Jane,

              Thanks for keeping on top of this and sorry for the lack of replies on my end.

              JSDOM is actually what I've already been using so far.

              I've tried the provided sample but it has the exact same formatting issue I've already mentioned

              Here's the survey json I'm using:

              JavaScript
              const surveyPDF = new SurveyPDF.SurveyPDF({ "title": "Sample Survey", "elements": [ { "type": "html", "name" : "introMsg", "html": "<p>Hello <b>World!</b><p>" } ] }, { htmlRenderAs: "standard" });

              And here's the result:

              Clipboard-File-1.png

              Can you ask the Dev team to try that in node and see if they get the same result.

              That's fairly simple HTML so I'd be surprised if that was enough to break it.

              Thanks,
              Ben.

                Hi Ben,
                Thank you for the update. It appears that each question within the HTML content appears on a separate line. I tried playing around different styling options, however, couldn't produce a satisfactory result. We will investigate this issue further and post updates in the following GitHub thread: https://github.com/surveyjs/survey-pdf/issues/275.

                Thanks