Survey-library: PDF Export of completed survey

[bvolkmann]

Are you requesting a feature, reporting a bug or asking a question?

I'm requesting a feature.

Description

Hi everyone,
I stumbled across Issue #401 while looking for a way to export single completed surveys as a PDF Document,
that looks like the survey itself (like the "Display" mode).

Unfortunately that issue was closed in december 2017, so i had to create a new one,
since the given answers were unsatisfying.

I'm proud and looking forward to integrate the SurveyJS library in our software,
but also am in a desperate need for this functionality as we're planning to provide
the completed surveys as PDF documents via an IHE interface.

Thank you!

Best regards,
B. Volkmann

[tsv2013]

Hello,

Thank you for the feedback. PDF exporting is a rather complex task that lays outside the SurveyJS library functionality baoundaries. I think PDF export can be done via the 3rd party libraries, that solving this task better. @andrewtelnov @dmitrykurmanov what's your opinion?

Thanks, Serge
SurveyJS Team

[andrewtelnov]

@bvolkmann @tsv2013 I would suggest to use libraries like this.
You may set the following survey options:
survey.mode = "display";
survey.isSinglePage = true;

Thank you,
Andrew

[bvolkmann]

With the 3rd party libraries html2canvas and jsPDF
it was possible to export the single, filled survey to a PDF.

[SaharDastitash]

Hello ,

Can you please give us an example?

[SaharDastitash]

@bvolkmann Could you please share your solution for the export to pdf?

[andrewtelnov]

@SaharDastitash Here is the example

Thank you,
Andrew

[SaharDastitash]

Thank you @andrewtelnov for the prompt answer , I really appreciate that. That's what I exactly wanted. The problem is that it doesn't save all the questions in your example. It only saves the results in one page, Is there any way to fix this?

[andrewtelnov]

@SaharDastitash Yes, I can see what you are talking about. It can export data on one page only. We will take a look.

Thank you,
Andrew

[andrewtelnov]

@SaharDastitash We started to work on a code that breaks our survey rendered result on pages. Here is what we have right now. Please take a look at separate file: export_to_pdf.js

Thank you,
Andrew

[SaharDastitash]

@andrewtelnov I'm not sure how does the code work but in the js file there is no SaveToPdf() function but the button is calling this function!

[andrewtelnov]

@SaharDastitash There is a "Files" section in plunker, in the top left corner.
You will see export_to_pdf.js that does the job.

Thank you,
Andrew

[SaharDastitash]

Oh Thanks, I found the SaveToPdf() function in the index.js page. Thank you @andrewtelnov

[MugiwaraNoMehdi]

@andrewtelnov here is a complete example of printing survey in multipage without breaking any element of the survey :
https://plnkr.co/edit/E7vsei4zm5xGr0DLq57r?p=preview

[andrewtelnov]

@MugiwaraNoMehdi We have made an example and put our code into separate GitHub repo.

Thank you,
Andrew

[MugiwaraNoMehdi]

I have tried your example, but the result is really bad :
surveyResult.pdf
you should take a look to my result :
test.pdf

[andrewtelnov]

@MugiwaraNoMehdi Could you please check the latest source on our repo. I have made some modification to make it look better.
You may do PR, it would be great if it fixes some issues you found.

Thank you,
Andrew

[MugiwaraNoMehdi]

for me it's done in ten lines of code :

`

    var opt = {
    // margin array for the document [top, left, bottom, right]
    margin: [18, 10, 18, 10],


    // this option avoid breaking the survey on an element
    pagebreak: { mode: 'avoid-all' }
    // export file
    filename: 'test.pdf',
  };

  // getting the survey element
  var data = document.getElementById('surveyExportElement');
  // export
  html2pdf().set(opt).from(data).toPdf().get('pdf').then((pdfObject) => {
    // you can add headers or footers here... 
  }).save();

`

I am just using html2pdf that does the job itself,

to avoid display issues you must :

1 - make #surveyExportElement (or it's container) have a fixed width, 595px is good for a4 'portrait'

2 - add max-width for survey elements like for matrix :

`#surveyExportElement .sv_q_matrix {
max-width: 590px;
}

surveyExportElement .sv_q_matrix td {

min-width: 0!important;
}
`
because the option " pagebreak: { mode: 'avoid-all' } " work for the height and not for the width.

my code consist of creating a new div, copy the survey in it, export, and hide it on finish.
html2pdf.js use jspdf and html2canvas, and it works really good, if you want I can make a pull request with my code.

Thank you

[andrewtelnov]

@MugiwaraNoMehdi I think we will just add ourself. I have added two new issues in our repo.

Thank you,
Andrew

[gologames]

Hello,

Look at PDF Export Library for SurveyJS, which we developed recently.