Wondered if anyone could help me? A client has asked for a course which once completed (i.e, user on last slide) all slides can be exported to a PDF, including with any text input variables a learner may have used.
Would anyone know if this is possible and how it could be done? (JS?)
Bit of background: The course will be hosted on AWS and learners will use a tablet for it. It will be used as a digital workbook for making notes during a training session. The aim is that notes, with slides, can then be exported to PDF and emailed to a learner as a reference at a later date.
Yes this is possible - we use JavaScript to do this and one of the JavaScript pdf code libraries. It's not for the feint-hearted but here's a demo we set up to show what can be done. Sorry the demo is a bit long - it's really aimed at our clients - but stick with it I think you find it worth it!
We haven't tested the code on a tablet - but I can't see a problem there.
However, this demo uses a code library "jsPdf" which there are a number of articles about on this community site and it does require you to be able to edit the compiled code after you have published it. You need to be able to put the pdf template files in the root folder and modify the story.html file or the index_lms.html if you are loading for an lms.
With your AWS server I'm assuming you would have the ability to do that. If not, there is a way of doing this using a more recent JavaScript library which avoids having to edit the html files.
Ah - sorry - just re-read you post. This demo allows the learner to download the pdf on their system - that would be a problem for iPad's (I'm not an Apple user at all - but I know they don't like you storing files on their products!)
You would need the pdf to be stored somewhere on your AWS server - this should be possible but we haven't done that in our projects so far.
Bit of background: The course will be hosted on AWS and learners will use a tablet for it. It will be used as a digital workbook for making notes during a training session. The aim is that notes, with slides, can then be exported to PDF and emailed to a learner as a reference at a later date.
for clarification: each learner should get his unique pdf containing the whole course (slides/layers) including personal comments via mail?
The demo uses "jsPdf" which is an older JavaScript library - the pdf is constructed by using a png image of each page and then filling in the learner own text by using "x" and "y" coordinates on the page. So you could create images of each screen and overlay and then grab them as png's
BUT - we have recently (like in the last two weeks) started using another library "pdf-Lib" - this has the capability to fill out a pdf "form". This is much easier. If you created your whole course as a pdf (you could export it as a pdf) - then edit the pdf and make it into a pdf form (using Adobe Acrobat) naming the fields where you want the learner's own notes to appear.
The JavaScript retrieves the input variables and then places them in the pdf using the field names you have defined in the form.
So yes, each learner gets a unique pdf to download...
But, for Matt, I'm still not sure how to store that pdf file on the server - it would have to have a unique filename for each user so he could then pick it up at a later stage and email it. I'm sure it's possible - just have never done it...
At the risk of getting too technical - in our courses where we use "pdf-lib" - which is only one at the moment! - having created the pdf filled-out form, we then use another pdf code library to download the file. This library only downloads files...
But to download it we first convert it to a 'blob' and then call the download function.
I'm sure there is another code library that can do something else with a blob like storing it somewhere or emailing it?
Hi John. Thank you so much for your comments, really helpful. I have used your demo and it works really well, I've also used it on iPad and although it includes an extra step (i.e, opens in browser tab) it does work too. This can then be shared via email. Ideally the JS would do all this, but even what i've seen so far would suit I'm sure.
I've done v basic JS using the 'execute' trigger but jspdf and amending JS in exported output isn't something i've done before but I'm keen to know more about. I'll look into js pdf as I have seen it mentioned. It has also opened my eyes to that it may be beneficial for me to work with an E-learning Dev on this particular project. Thank you again!
Hi Jurgen. Thanks for your comment. Yes that's correct, I know the latest update has a print slide option which opens up a dialogue which a learner can use to save as pdf and then email, which is great. But really what I need is a 'print all slides' option that also shows any variables the user has added for their reflections throughout the module. I can get the variables into PDF via adding all to one slide and printing that, but really i'd need them on each slide so they have context. The learner can then also refer back to the PDF for anything, not just their notes.
7 Replies
Yes this is possible - we use JavaScript to do this and one of the JavaScript pdf code libraries. It's not for the feint-hearted but here's a demo we set up to show what can be done. Sorry the demo is a bit long - it's really aimed at our clients - but stick with it I think you find it worth it!
https://demo6.profilelearning.com
We haven't tested the code on a tablet - but I can't see a problem there.
However, this demo uses a code library "jsPdf" which there are a number of articles about on this community site and it does require you to be able to edit the compiled code after you have published it. You need to be able to put the pdf template files in the root folder and modify the story.html file or the index_lms.html if you are loading for an lms.
With your AWS server I'm assuming you would have the ability to do that. If not, there is a way of doing this using a more recent JavaScript library which avoids having to edit the html files.
Ah - sorry - just re-read you post. This demo allows the learner to download the pdf on their system - that would be a problem for iPad's (I'm not an Apple user at all - but I know they don't like you storing files on their products!)
You would need the pdf to be stored somewhere on your AWS server - this should be possible but we haven't done that in our projects so far.
for clarification:
each learner should get his unique pdf containing the whole course (slides/layers) including personal comments via mail?
The demo uses "jsPdf" which is an older JavaScript library - the pdf is constructed by using a png image of each page and then filling in the learner own text by using "x" and "y" coordinates on the page. So you could create images of each screen and overlay and then grab them as png's
BUT - we have recently (like in the last two weeks) started using another library "pdf-Lib" - this has the capability to fill out a pdf "form". This is much easier. If you created your whole course as a pdf (you could export it as a pdf) - then edit the pdf and make it into a pdf form (using Adobe Acrobat) naming the fields where you want the learner's own notes to appear.
The JavaScript retrieves the input variables and then places them in the pdf using the field names you have defined in the form.
So yes, each learner gets a unique pdf to download...
But, for Matt, I'm still not sure how to store that pdf file on the server - it would have to have a unique filename for each user so he could then pick it up at a later stage and email it. I'm sure it's possible - just have never done it...
At the risk of getting too technical - in our courses where we use "pdf-lib" - which is only one at the moment! - having created the pdf filled-out form, we then use another pdf code library to download the file. This library only downloads files...
But to download it we first convert it to a 'blob' and then call the download function.
I'm sure there is another code library that can do something else with a blob like storing it somewhere or emailing it?
Hi John. Thank you so much for your comments, really helpful. I have used your demo and it works really well, I've also used it on iPad and although it includes an extra step (i.e, opens in browser tab) it does work too. This can then be shared via email. Ideally the JS would do all this, but even what i've seen so far would suit I'm sure.
I've done v basic JS using the 'execute' trigger but jspdf and amending JS in exported output isn't something i've done before but I'm keen to know more about. I'll look into js pdf as I have seen it mentioned. It has also opened my eyes to that it may be beneficial for me to work with an E-learning Dev on this particular project. Thank you again!
Hi Jurgen. Thanks for your comment. Yes that's correct, I know the latest update has a print slide option which opens up a dialogue which a learner can use to save as pdf and then email, which is great. But really what I need is a 'print all slides' option that also shows any variables the user has added for their reflections throughout the module. I can get the variables into PDF via adding all to one slide and printing that, but really i'd need them on each slide so they have context. The learner can then also refer back to the PDF for anything, not just their notes.