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 Jackie,
You'll want to confirm you're viewing the published output in one of the supported browsers for Android as detailed here.
Glad you were able to get it to work Hanne and thanks for updating us!
- MathewAraujoCommunity Member
Glad to hear it worked out Hanne! If you run into any issues let me know!
- ShahabKhanCommunity Member
- MathewAraujoCommunity Member
Hey Shahab,
It's because of the text wrapping. Can you share a bit of your code? It would be similar to the section below:
var x = doc.splitTextToSize(y, 500);The splitTextToSize is the text wrapping and the value 500, in this case, is the length. 500 works well on Portrait, but it appears you are doing a Landscape doc. If you fix that value it should work.
- ShahabKhanCommunity Member
//Retrieve Player Variables
var player = GetPlayer();
userName = player.GetVar("userNote1");
userNotes = player.GetVar("userNote2");//Create PDF
var doc = new jsPDF('landscape');//Create Split Text Variable
var splitNotes = doc.splitTextToSize(userNotes, 550);//Color Rectangle at top
doc.setFillColor(51, 204, 255);
doc.rect(0, 0, 1700, 50 , 'F');//Congrat Text
doc.setFontSize(36);
doc.setFont("helvetica");
doc.setFontStyle("bold");
doc.setTextColor(255, 255, 255);
doc.text(105, 30, "Wrap-up note");//Notes Heading
doc.setFontStyle("normal");
doc.setFontSize(12);
doc.setTextColor(0, 0, 0);
doc.setFontStyle("normal");
doc.text(20, 65, "Note 1:");//User Name
doc.setFontSize(14);
doc.setFontStyle("normal");
doc.text(20,75, userName);//Notes Heading
doc.setFontStyle("normal");
doc.setFontSize(12);
doc.setTextColor(0, 0, 0);
doc.setFontStyle("normal");
doc.text(20, 110, "Note 2:");//Notes Variable Information
doc.setFontSize(14);
doc.setFontStyle("normal");
doc.text(20, 120, splitNotes);//Save PDF
doc.save('Wrap-up note'); - MariusPienaarCommunity Member
I would like to know whether it is possible to use this export to PDF function when viewing the story file in the Articulate Player on mobile devices.
Hi Marius,
Javascript won't work within the Mobile player, although it does work within the HTML5 output for iOS or Android devices, and you can see that noted in the comparison chart here.
As for if it would allow you to export to a PDF, I don't believe so it would have to have software for the creation of the PDF which is not on most tablets.
- MakaylaPrevosyCommunity Member
Hi all, Does anyone know if this works on a course that will be taken completely offline? Publishing to CD Rom.
Hi Makayla! Looks like Ashley is helping you in a couple of other threads like this one.
- JackQuantrillCommunity Member
This is a seriously useful tool to be able to call upon! Huge thanks for putting together this tutorial.
Like a few others I had issues getting this to work at first. The thing that did it for me was instead of zipping the file via Storyline after making the tweaks to the HTML files, I zipped it in the explorer/finder window.
(Make sure you zip the files INSIDE the output folder, not the output folder itself.)
Thought I'd share in case anybody else fell down at the same point.
I'm using Storyline 2 and have tested it successfully on Chrome, Safari and on an iPhone.
Would be great to see some examples of the kind of PDFs people have created via this tool.
- EricZorabCommunity Member
Hello Jack, How to make a zip and put in my LMS. I publish the working output file. Unfortunately, my working content is overridden. I have been working on it for a couple of days now. Do you have a good tip?