Saving Storyline Variables to a PDF
Aug 13, 2014
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:
110 Replies
Hi John,
This thread is a bit older so I'm not certain that folks are still subscribed to reply - you could message them using the "contact me" feature on their profiles.
This is really great, but I can't for the life of me get it to work. I *think* that I followed all of the steps -- I added the JavaScript files to the story_content folder and added the script files to the HTML of the story.html file. However, nothing happens when I hit the button in the Storyline. Does anyone have any thoughts about what I might have missed? Thanks!
Hi Kristen,
I'm not well versed in Javascript, but you will want to make sure that you're testing the published output within the intended environment as described here.
I'm wondering if I'm running into trouble because I'm working in Storyline 2. Does anyone know the answer to this question?
Javascript still works in Storyline 2, but if you're not testing it within the intended publish environment it could be encountering security restrictions locally and won't execute the Javascript as detailed here.
Hi there, we added this function to our Storyline 2 course with a very customised output PDF with multiple variable fields so it is possible. We outsourced the development of this function to a fantastic developer. Because its such a dark art I can't tell you how its done but I will contact him and ask if he can contribute to this thread.
Hi Rory,
I would SO appreciate any help that you could provide. Thanks so much!
Cool, I've emailed him. He was really easy to deal with and nailed it exactly as i had briefed.
Thanks Rory for the assist here - and hopefully he'll be able to assist Kristen with the "dark arts" :-)
So I was running into trouble with this until, on a whim, I decided to reference jquery and a few other libraries for the heck of it (in addition to the jsPDF and FileSaver pieces) mentioned in the post. I'm happy to report it works now! I'm not sure why this worked, exactly, but here are the script tags I added. When I have some time I'll see if I can isolate which references are making it happen and which aren't. In the meantime... IT WORKS!
<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>
<script SRC="story_content/jspdf.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.min.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/split_text_to_size.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/canvas.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/cell.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/from_html.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/png_support.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/standard_fonts_metrics.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/addhtml.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/javascript.js" TYPE="text/javascript"></script>
Always good news Jedidiah - thanks for sharing here!
Thanks so much, Jedidiah. However, I don't have all those other .js files (the ones that are called in the plug-ins folder). Where could I get them?
Most of those are actually included in the zip the OP included. If any are
missing they're likely available on github. Just do a search for jsPDF to
start. If there's a specific one you can't find let me know and I'll see if
I can find a direct link.
Just a reminder Jedidiah that replying via email includes your signature here so you are welcome to edit that if you'd like to remove the information.
Also note that where you put them doesn't matter (they don't have to be in a plugin folder) as long as you specify that location in the script tags.
Saw that and edited - thanks for the heads up, and sorry for the spammy replies!
No worries, not spammy at all - just in case you didn't want it there!
I must still be doing something wrong. I put all of the plug-ins into the plug-in directory and made sure everything was there and put the right HTML in and it still doesn't do anything when I press the download button. This is what I have in the HTML.
<script SRC="story_content/user.js" TYPE="text/javascript"></script>
<script src="story_content/story.js" type="text/javascript"></script>
<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>
<script SRC="story_content/jspdf.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.js" TYPE="text/javascript"></script>
<script src="story_content/FileSaver.min.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/split_text_to_size.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/canvas.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/cell.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/from_html.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/png_support.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/standard_fonts_metrics.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/addhtml.js" TYPE="text/javascript"></script>
<script SRC="story_content/plugins/javascript.js" TYPE="text/javascript"></script>
</head>
And here's a screenshot of my plug-ins folder:
Thanks Kristen and hopefully someone in the community will be able to assist you!
Kristin, I sent you a message. If you're able to share your files I might be able to suss it out.
Sure will. Tomorrow!
Thank you so much for sharing this; you made my year! It works for me in Storyline 2. My only problem is it's not working on a Mac or Ipad. Does anyone know how to make it work on a Mac and Ipad? Is there a plan for Articulate to make this a feature of Storyline?
Hi Gaylen,
What browser are you using to view the output on your Mac or iPad? You'll want to ensure you're using one of the supported browsers here.
We don't announce product plans or roadmaps, but if you'd like to see a particular feature you'll want to submit a feature request as those go to our product development team.
Hi. I am having the same problem. Kristen, could you fix this?
I just took the .story from this example to test, put the plugins into the plugin directory and paste the script in the html, but it doesn't work.
I also make sure that all rutes and names of the files are correct.
Can anyone help me please?!?!?!
I forgot to copy the links to the .html5 too! :)