Example of using SurveyPDF internal code to render custom elements, Knockoutjs Survey Library Example

Adorners

Result
JavaScript
HTML
Documentation


                        

Survey.StylesManager.applyTheme("modern");
            
                var json = {
  "questions": [
    {
      "type": "text",
      "title": "Bottom description",
      "name": "pdf_adorners_bottomdesc"
    },
    {
      "type": "checkbox",
      "title": "Render checkbox question as radiogroup",
      "name": "pdf_adorners_checkboxasradio",
      "choices": [ "A", "B" ]
    },
    {
      "type": "matrix",
      "title": "Change size of question",
      "name": "pdf_adorners_changesize",
      "columns": [
        "Column 1",
        "Column 2",
        "Column 3"
      ],
      "rows": [
        "Row 1",
        "Row 2"
      ]
    },
    {
      "type": "comment",
      "title": "Render comment question as html",
      "name": "pdf_adorners_commentashtml",
      "defaultValue": "Sed venenatis nisl mi, eget lobortis augue venenatis ac.\n\nUt consectetur, nunc a tristique tempor, enim neque porttitor urna, non accumsan diam sem at erat. Suspendisse in sapien ac ligula aliquam porta a eu lorem"
    },
    {
      "type": "tagbox",
      "title": "Render only selected choices loaded via choicesByUrl",
      "name": "pdf_adorners_selectedchoices",
      "choicesByUrl": {
        "url": "https://surveyjs.io/api/CountriesExample"
      },
      "defaultValue": ["Bhutan", "Chad", "France"]
    }
  ]
};

                window.survey = new Survey.Model(json);
            
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
            
                survey.render("surveyElement");
            
function saveSurveyToPdf(filename, surveyModel, pdfWidth, pdfHeight) {
   var options = {
        format: [pdfWidth, pdfHeight]
    };
    var surveyPDF = new SurveyPDF.SurveyPDF(json, options);
    surveyPDF.data = surveyModel.data;
    surveyPDF.onRenderQuestion.add(function (survey, options) {
        if (options.question.name !== "pdf_adorners_bottomdesc") return;
        var plainBricks = options.bricks[0].unfold();
        var lastBrick = plainBricks[plainBricks.length - 1];
        var point = SurveyPDF.SurveyHelper.createPoint(lastBrick);
        return new Promise(function (resolve) {
            SurveyPDF.SurveyHelper.createDescFlat(point, options.question,
                options.controller, 'Some description').then(function (descBrick) {
                options.bricks.push(descBrick);
                resolve();
            });
        });
    });
    surveyPDF.onRenderQuestion.add(function (survey, options) {
        if (options.question.name !== "pdf_adorners_checkboxasradio") return;
        var flatRadiogroup = options.repository.create(survey,
            options.question, options.controller, "radiogroup");
        return new Promise(function (resolve) {
            flatRadiogroup.generateFlats(options.point).then(function(radioBricks) {
                options.bricks = radioBricks;
                resolve();
            });
        });
     });
    surveyPDF
        .onRenderQuestion
        .add(function (survey, options) {
            if (options.question.name !== "pdf_adorners_changesize") return;
            var flatMatrix = options
                .repository
                .create(survey, options.question, options.controller, "matrix");
            var oldFontSize = options.controller.fontSize;
            options.controller.fontSize = oldFontSize / 2.0;
            return new Promise(function (resolve) {
                flatMatrix
                    .generateFlats(options.point)
                    .then(function (matrixBricks) {
                        options.controller.fontSize = oldFontSize;
                        options.bricks = matrixBricks;
                        resolve();
                    });
            });
        });
    surveyPDF
        .onRenderQuestion
        .add(function (survey, options) {
            if (options.question.getType() === "comment") {
                var htmlQuestion = Survey.QuestionFactory.Instance.createQuestion("html", "html_question");
                var paragraphs = options.question.value.split("\n");
                htmlQuestion.html = "";
                paragraphs.forEach(function(p) { htmlQuestion.html += "<p>" + p + "</p><br>" });
                var flatHtml = options
                    .repository
                    .create(survey, htmlQuestion, options.controller, "html");
                var commentBricks = options.bricks[0].unfold();
                var commentBrick = commentBricks.pop();
                var point = SurveyPDF.SurveyHelper.createPoint(commentBrick, true, true);
                return new Promise(function (resolve) {
                    flatHtml
                        .generateFlats(point)
                        .then(function (htmlBricks) {
                            options.bricks = commentBricks;
                            options.bricks = options.bricks.concat(htmlBricks);
                            resolve();
                        });
                });
            }
        });
    surveyPDF
        .onRenderQuestion
        .add(function (survey, options) {
            if (options.question.name !== "pdf_adorners_selectedchoices") return;
            var checkboxQuestion = Survey.QuestionFactory.Instance.createQuestion('checkbox', options.question.name + '_checkbox');
            checkboxQuestion.titleLocation = 'hidden';
            var selectedChoices = [];
            options.question.visibleChoices.forEach(function (choice) {
                if (options.question.isItemSelected(choice)) {
                    selectedChoices.push(choice.value);
                }
            });
            checkboxQuestion.choices = selectedChoices;
            var flatCheckbox = options.repository.create(survey, checkboxQuestion, options.controller, 'checkbox');
            var titleBrick = options.bricks[0].unfold();
            titleBrick.pop(); titleBrick.pop();
            titleBrick = new options.module.CompositeBrick(...titleBrick);
            var point = options.module.SurveyHelper.createPoint(titleBrick, true, false);
            point.yTop += options.controller.unitHeight / 2.0;
            return new Promise(function (resolve) {
                flatCheckbox
                    .generateFlats(point)
                    .then(function (checkboxBricks) {
                        options.bricks = [titleBrick];
                        options.bricks = options.bricks.concat(checkboxBricks);
                        resolve();
                    });
            });
        });
    surveyPDF.save(filename);
}

document.getElementById("saveToPDFbtn").onclick = function() {
  var pdfWidth = survey.pdfWidth || 210;
  var pdfHeight = survey.pdfHeight || 297;
  saveSurveyToPdf("surveyResult.pdf", survey, pdfWidth, pdfHeight);
};

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of using SurveyPDF internal code to render custom elements, Knockoutjs Survey Library Example</title>

<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
    <script src="/DevBuilds/survey-knockout/survey.ko.min.js"></script>
    <link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/modern.css" type="text/css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/jspdf/dist/polyfills.umd.js"></script>
<script src="https://unpkg.com/jspdf@2.3.0/dist/jspdf.umd.min.js"></script>
<script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.js"></script>    <script src="/DevBuilds/survey-pdf/survey.pdf.min.js"></script>

</head>
<body>
    
<button id="saveToPDFbtn" style="margin:10px">Save to PDF</button>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

SurveyPDF adorners

You may use onRenderQuestion event to render custom elements in PDF document using internal SurveyPDF helper methods and objects

The event is fired for every rendered question. Event accepts two parameters: instance of SurveyPDF and instance of AdornersOptions object


let surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.onRenderQuestion.add(function (survey, options) {
    if (options.question.name === "question_to_remove_from_pdf") {
        options.bricks = [];
    });

Bricks

AdornersOptions object contains bricks property with array of SurveyPDF internal objects which represents PDF document elements (texts, boxes, images, etc.). You may modify this array to perform custom rendering. If you leave this array without any changes then PDF will be rendered as by default

Question

AdornersOptions's question property is SurveyJS question which is rendered now

Controller

AdornersOptions has controller property which is instance of DocController object. It is required parameter to many SurveyPDF internal methods


let surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.onRenderQuestion.add(function (survey, options) {
    if (options.question.name !== "filter questions like this") return;
    //SurveyPDF bricks may be composite and contain many inside one
    //call unfold() method to get plain array with all bricks inside one
    var plainBricks = options.bricks[0].unfold();
    var lastBrick = plainBricks[plainBricks.length - 1];
    //SurveyPDF has SurveyHelper object with set of useful methods
    //e.g. createPoint(rect: IRect, isLeft: boolean = true, isTop: boolean = false): IPoint
    var point = SurveyPDF.SurveyHelper.createPoint(lastBrick);
    return new Promise(function (resolve) {
        SurveyPDF.SurveyHelper.createDescFlat(point, options.question,
            options.controller, 'Some description').then(function (descBrick) {
            options.bricks.push(descBrick);
            resolve();
        });
    });
});

Point

AdornersOptions has point property (with xLeft, yTop properties) which represent point in PDF page after which you can render custom bricks below it. It is not recommended to draw above this point because you can overlap new bricks with previous

Repository

AdornersOptions also has repository property which is instance of FlatRepository object. FlatRepository has create method which instantiate FlatQuestion and it subclasses, which can be used to generate bricks with default SurveyPDF render. You may modify this bricks to achieve desired custom view


let surveyPDF = new SurveyPDF.SurveyPDF(json);
surveyPDF.onRenderQuestion.add(function (survey, options) {
    if (options.question.name !== "some_checkbox_question") return;
    //create radiogroup flatQuestion to render checkbox as radigroup
    var flatRadiogroup = options.repository.create(survey,
        options.question, options.controller, "radiogroup");
    return new Promise(function (resolve) {
        flatRadiogroup.generateFlats(options.point).then(function(radioBricks) {
            options.bricks = radioBricks;
            resolve();
        });
    });
});

settings

set pdf width mm:

set pdf height mm:

Adorners