Forum Discussion
Saving Storyline Variables to a PDF
I was asked about an example I created for saving variables from Storyline into a PDF file for download. Rather than fill the ELHChallenge thread with the information I decided to write up a thread on what I did. If you have any questions feel free to reach out.
The course executes JavaScript from within a Storyline (trigger) with the use of a client-side JavaScript PDF generator, jsPDF. This will not work locally, however, I have had successes with it functioning in IE11 without being hosted. It is easiest to design the PDF prior to inputting this into the course as you cannot preview. Thankfully, the jsPDF package contains an editor with their examples to design in.
Script & Demo Files for jsPDF:
Parallax: http://parall.ax/products/jspdf (contains an editor as well)
or via
GitHub: https://github.com/MrRio/jsPDF
1. Add Variables(score)/Text Entry fields
2. Add Trigger to execute JavaScript when user clicks (for downloading the PDF)
3. Retrieve the Player Variables within the .js field of the trigger and attach jsPDF settings per desired result look and feel.
**Notice an additional variable is created to transitioning the Storyline variable for the "Notes" in order to use ".splitTextToSize" for text wrapping within the PDF file. By default text wrapping does not occur.
4. Publish the course and add the applicable JavaScript files needed for your package (I placed mine within the "story_content" directory)
5. Add script files to the HTML <head></head>(story.html)
6. The result: Articulate Storyline Variables pushed to a downloadable PDF.
Storyline:
PDF Output:
Live Version:
https://googledrive.com/host/0B9kY09mQf_iqV3dTQ0Q4cUFvTlU/
Source & Published Files:
111 Replies
Hello everybody!
This thread is probably not very followed as it is a bit old but I have been playing around with the story file provided and I managed to get it to work, even display accents (french alphabet) and add an image of the avatar selected by the user at the beginning of the course.
You can see the result here : published output and you can download the .story file just below.
I made this really quickly, I just wanted it to work, but I'm sure the file and the javascript function can be improved. Please let me know if you have any suggestion.
Thanks!
Always good to have new examples - thanks for sharing Celine!
Hi Celine!
That's awesome. Thanks for sharing :)
Hi There,
It works beautifully for me in Chrome (both HTML and HTML5, as well as IE11 HTML5, however I cannot get it to work IE11/Flash.
Your live version works in IE11/Flash, however when I download and publish the sample Storyline file, it also fails the same as mine.
Is there anything different about the configuration on the live version?
Thanks!!
AndrewHi Andrew,
Which version fails in IE/Flash? The published output that Celine shared or when you publish it and test it? For the latter are you uploading to your live environment or testing it locally? Testing published content locally is known to cause security issues as detailed here.
Wow quick reply! Thank you.
This is the live version posted above that works fine in IE11/Flash:
https://googledrive.com/host/0B9kY09mQf_iqV3dTQ0Q4cUFvTlU/Below that where it has links to the "Source and Public files", that story file when published and hosted fails to work (IE11/Flash), but does work fine for HTML5 version. (also, it works chrome flash or HTML5).
Hi Andrew,
I get a 404 error when trying to access that page, can you double check the URL? Are you referencing the same URL that Celine shared above? That one seems to work fine for me - but if it's not working on your end please feel free to let us know. Also, if you've republished perhaps that's the one not working?
https://googledrive.com/host/0B9kY09mQf_iqV3dTQ0Q4cUFvTlU/
I just can't paste, yes its the one in the post above.
Hi Andrew,
It may be something I'll have to defer to the community on, as now it seems you're referencing the original post as in regards to the:
"Below that where it has links to the "Source and Public files""That example included a number of Javascript elements which I"m unable to offer support for, but I do see about two months ago another user posted:
I was also unable to get this working until I opened the story.html file and added the following script references alongside the existing user.js and story.js tags.
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>(I have no idea if these are redundant, but I added all of them and presto - it all worked.)
Make sure that you also reference the FileSaver.js, jspdf.js etc. as described in the OP.
I also published without HTML5 as this seems to only work in the flash publish.
I didn't experience any difficulties opening the file Celine linked to earlier or the newest link you shared in your latest post.
Thanks Alot Ashley! I will try it,
*
Is it possible to turn that JS code for creating the PDF into a function and then reference it on each instance so that you can edit the template across a set of projects easily?
E.g. keep the function with in user.js, and then when a print button is used, only input the data which changes, e.g. the fields.
I have to create about 100 of these across a number of different projects, so this would be handy - any tips would be great!
Has anyone gotten this to work with the HTML5 export? I've tried the examples that folks have provided in this post and none seem to work with the story_html5 output. Specifically on an Android device.
