Survey.StylesManager.applyTheme("defaultV2");
var json = {
"elements": [
{
"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);
});
ReactDOM.render(
<SurveyReact.Survey model={survey} />, document.getElementById("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 = 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 = 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);
}
function createQuestion(type, name) {
let s = !!window.Survey ? window.Survey : window.SurveyCore;
if(!s) s = SurveyCore;
return s.QuestionFactory.Instance.createQuestion(type, name);
}
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>Adorners, Reactjs Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.min.js"></script>
<script src="/DevBuilds/survey-core/survey.core.min.js"></script>
<script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
<script src="/DevBuilds/survey-react-ui/survey-react-ui.min.js"></script>
<link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="./index.css">
<link href="/DevBuilds/survey-core/modern.css" type="text/css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.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>
<script src="/DevBuilds/surveyjs-widgets/surveyjs-widgets.min.js"></script>
</head>
<body style="margin: 0">
<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/babel" src="./index.js"></script>
</body>
</html>
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 = [];
});
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();
});
});
});
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();
});
});
});
Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.
We'd really appreciate your feedback.
Start the SurveyApproximate time to complete: 2 min.