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 Hanne!
Glad it worked out. Absolutely, there's one more file you need to add to the story_content, I've attached it below.
You'll have to change your image to a Data URL, I used this site, http://dataurl.net/#dataurlmaker. It becomes a long file, and exceeds the character limit for JS in Storyline so here are some steps.
1) In the JS editor in storyline add a variable for example:
var imgData = "";
You'll leave it blank for now.
2) Add in another line in the JS editor in stoyline for it's size for example:
doc.addImage(imgData, "JPEG", 30, 52, 240, 155);
You can edit the size and position in the numbers after "JPEG".
3) Publish your storyline content
4) Follow steps 4 and 5 from this post by adding the script lines to the story.html file, but also add:
<script src="story_content/addimage.js" type="text/javascript"></script>
5) Add the .js files, including the addimage.js file to story_content
6) Open the user.js file in story_content and add in Data URL image to the value of image variable (like mine imgData)
7) Zip the folder and publish to the LMS
Let me know if this works!Great example, Josh. Works great in Firefox and Chrome. Experimented with this earlier in the year. Gave up when it got sticky in IE8, as this was one of my requirements. I think it was in the method used for saving the PDF that failed. There was a Flash-based workaround but I found an alternate.
You might have some luck embedding your dependencies in a Web object and dynamically writing them into the head of your document to save having to add them after each publish. Here's the function I use to rewrite headers at run time. This doesn't work well for everything but for PDF generation it should be fine.
//where is our carry-on baggage? Find this by right-clicking the web object and choosing open. Grab the object ID from the address bar.this.oLocation="story_content/WebObjects/66vjsN26Fjn/";//load the scripts dynamicallyfunction add_script(scriptURL,oID) {var scriptEl = document.createElement("script");var head=document.getElementsByTagName('head')[0];scriptEl.type = "text/javascript";scriptEl.src = scriptURL;scriptEl.id=oID;head.appendChild(scriptEl);}//only want to add these once! Check to see if the ID exists first.if(document.getElementById('soundman')==null){//first parameter is the script reference to add to the header, second is the object IDadd_script(oLocation+"script/soundmanager2-jsmin.js","soundman");}I also added another page to the PDF after each doc.text variable.
doc.addPage();
Steve, do you know how to attach this PDF to an new email message in Outlook?
Steve - do you know if this method is still working in 360? I've tried a couple of variations and have had no luck. Thanks.
I've tried publishing the example and it is still not working for me :/
I fill in the forms click the download button and nothing happens. Is there a way to fix this?
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>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.
Thanks Jedidiah!
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!
It's interesting to see this thread brought to life multiple times since the OP started it :-). I think that speaks to how useful it is.
I tried the project out and got it to work fine. However, I would like to add some functionality and I'm not sure how to go about it, or if it's possible.
I'd like to be able to add data to a pdf after it's been created. Could I have a page later on with another text field and submit button that would add that additional data to the pdf? What about adding data from a completely different storyline file?Has anyone tried anything like this?
Thank you!
Hi Josh,
thanks for sharing, this looks very promising! I just tried your example link in IE11 and Chrome, it works for me.
Thank you for the extensive explanation Josh. Can't wait to play around with it.
WOw and thank you
