Question T12887
Visible to All Users

Questions cut off when exporting PDF

created 2 years ago

Hi there,

Currently depending on how the layout of questions are configured, the exported pdf cuts off some questions. On the browser the questions are rendered correctly and we expect the same when exporting it to pdf. The widths are customized so they look nice when answering it (i.e smaller fields for postal code, bigger for address, etc).

I'm attaching the PDF where you can see that "Question 4" is rendered outside the page.

Is there anything that can be done to fix it? Maybe a configuration?

JSON
{ "locale": "de", "title": { "de": "Test Survey" }, "completedHtml": { "de": "<h1>Vielen dank für das Ausfüllen</h1>\n<p>Wir werden uns umgehend mit Dir in Verbindung setzen.</p>\n" }, "pages": [ { "name": "page1", "elements": [ { "type": "panel", "name": "panel1", "elements": [ { "type": "text", "name": "question1", "maxWidth": "500px", "title": { "de": "Question 1" }, "format": "text" }, { "type": "text", "name": "question2", "width": "190px", "minWidth": "190px", "maxWidth": "190px", "startWithNewLine": false, "title": { "de": "Question 2" }, "format": "text" }, { "type": "text", "name": "question3", "width": "300px", "maxWidth": "300px", "startWithNewLine": false, "title": { "de": "Question 3" }, "format": "text" }, { "type": "text", "name": "question4", "width": "300px", "maxWidth": "300px", "startWithNewLine": false, "title": { "de": "Question 4" }, "format": "text" } ] } ] } ] }

Answers approved by surveyjs Support

created 2 years ago

Hello Luan,
In your survey, fields are displayed in a single line. When you export the survey to PDF, survey fields go beyond the visible area because survey questions have the width option defined. You can reset the width question property for survey questions before exporting the survey to PDF:

JavaScript
const surveyPDF = new SurveyPDF.SurveyPDF(json, options); surveyPDF.getPanelByName('panel1').questions.forEach(q => q.width = '');

Example

Now, fields are sized to fit the available document width.
Clipboard-File-1.png

If you wish to allow survey fields to take more space, consider using the landscape export mode:

JavaScript
let options = { fontSize: 14, margins: { left: 10, right: 10, top: 10, bot: 10 }, orientation: 'landscape', format: [pdfWidth, pdfHeight] }; const surveyPDF = new SurveyPDF.SurveyPDF(json, options); surveyPDF.getPanelByName('panel1').questions.forEach(q => q.width = '');

Example

Please let me know if this option works for you.

    Comments (2)

      Your answer fixed the issue, thanks!

      Another thing that might help others is to export each answer in one line, by setting q.startWithNewLine = true on each question

        Great!

        Andrew
        SurveyJS Team