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:
Hi Eric,
Have you checked that you're publishing locally and not using the same name as a previously published file? If you used the same name and file path that would cause the file to be over written.
As for zipping the content you'll see an option on the publish successful window to "Zip" and that's what you can use to create the package to upload to your LMS.
If you have specific questions about the custom steps shared here, you could always use the "contact me" button on a ELH users' profile to reach out to them directly!
Best of luck with your project!
- SnorrskiCommunity Member
Hi every one
I am trying to use jsPDF to let the user export the content of 3 text variables. But I keep running in to the same problems.I have downloaded and added the js-libraries to the relevant places in story_html5.html.
I have also tried using an online SRC instead
I keep getting one of these errors:
actionator::exeJavaScript - Cannot read property 'defaultView' of undefined
oractionator::exeJavaScript - options.font.widthOfString is not a function
when I try to run the script.The first error I get when I use
https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js
instead of the various plugins, or if I use bothjspdf.js
(orjspdf.debug.js
) ,split_text_to_size.js
andstandard_font_metrics
.The latter error I get when I just use
jspdf.js
andsplit_text_to_size.js
.Here is a link to the online version: http://elearning.hosp.dk/0Afproevning/casef/test/story_html5.html?lms=1
And I have attached both the story-file (SL3) and the story_html5.html-file.
Does anyone have any idea what might be causing this?
- MathewAraujoCommunity Member
Hi Snorre,
Happy to help out if you need! Can't say I've seen that error before, and I've used jspdf in Storyline projects quite a bit, so I'm not entirely sure. Is the file downloading blank at least? Or is it simply not doing anything and throwing you that error?
At first I thought maybe it's because you weren't calling the libraries in the HTML5 file, but it looks like they are. However I noticed you don't have FileSaver.js in your source libraries, and if you do it's not being called in your index file. Are you able to attach the full .zip project? The .html file won't work without all the assets locally.
I also took a look at your user.js file and I just wanted to clarify, is the intention to just print the four variables you are grabbing from storyline with an image? If so, I can share some code that might simplify it a bit!
Sorry for the million questions, just getting some clarification so I can help! - akankshabishtCommunity Member
- StaceyCoolenCommunity Member
Bringing back a very old thread.. would love to be able to do this in 360. Has anyone had any success doing something like this? Thanks!
- TonyDrydenCommunity Member
I can view the demo example and save pdf perfectly fine with the source code.
My question is as soon as I start modifying the user.js file, the download button to export a pdf no longer works.
Do I need to edit the jspdf document for the download button to work?
- MrTahaCommunity Member
I made a photo album and I want the user to save their favorite photo with a print button or in their original file system, I don't know how to do that ...can u help me?
- DarylLynchCommunity Member
I've been using jsPDF in storyline for well over a year now. On my most recent project I've run into an issue where ONLY Text variables seem to work now. Using either Number or True/False variables seems to prevent the jsPDF from running at all. Has anyone else run into this issue and found a solution? I've tried everything I can think of: a brand new project file, newly made variables, new variable names, and no improvement. If I replace it with a 'Text' type variable it'll work just fine. I have to use number variables in my project, because the activity I made does math with the numbers.
Edit: I believe I figured this out. In order to get a numeric/number variable to display in the PDF, it MUST be added to a text string or a text-based varaible. So in the example, it takes the userScore variable and adds '%' to the end. Other numbers I've used I've added '$' to the beginning of the variable. I've also added a text-based variable like doc.text(20, 20, numericVariable + textVariable) This is - in my testing - a necessary step. You can't just doc.text(20, 20, userScore) where userScore is a Number variable from storyline.- SherriSagers-caCommunity Member
Hi Daryl - I found another way to deal with number variables. In lines 6-9, I import the number variables from Storyline and then in lines 22-25, I convert them to string variables. I also found, like you, that the unconverted number variables completely stopped the PDF print function. Nothing would happen at all when I clicked the print button - until I converted the number variables to strings.