Forum Discussion
Create single PDF document from Storyline text-entry responses
Hello,
I am creating an interaction where the students in a class fill in some 10-15 text-entry fields with their notes. And then I would like to have all the notes compiled in one PDF for the s...
Hello,
I wanted to share this. I created this workbook for a client. When clicking on the print button, a pdf is created and downloaded. I used a javascript library called jsPDF.
Hi Russell,
I tried out your interaction and wow, that's very cool!
Thank you so much for sharing it with me. I am a complete novice with Javascript, but I'm learning.
I will look at your source files in some depth.
Thanks again!
Russell,
Thanks for this example. Unfortunately, running the javascript returns a cross-site error, since modern browsers block scripts that try to access a frame with a different origin. This can be turned off on individual browsers, but that's not a feasible solution for most end-users. Also, the only js included in this doesn't make it clear how someone is laying out their js using AS3's variables. This is what I see in the js button:window.frames[0].frameElement.contentWindow.CreateBook();
Do you have an example of this project working with hosted content in the same domain and a clear example of where the "CreateBook()" method is defined?
Hello Peter,
I don't know why you would be getting any cross-site errors. This uses a Javascript Library called jsPDF that is available from here: https://mrrio.github.io/
The Code: window.frames[0].frameElement.contentWindow.CreateBook(); executes a the function called CreateBook() that is inside of the WebObject.
If you extract the provided example there is a folder called PDFBook. This folder is the WebObject. Inside of the folder there are 3 files. An index.html file, createbook.js file and the jspdf.min.js file.
The main file that you want to look at is createbook.js This is where the CreateBook function is.
You can open the createbook.js file in a text editor like notepad. However, I like to use a program called Sublime Text. https://www.sublimetext.com/
This is exactly what we have been looking for, however, I don't quite understand how to implement it. I can see how to update the JS with my variables from SL, however, I can't figure it out from there.
How do you set up the PDF with Header/Footer information?
What is the jspdf.min? Do I need to edit that with anything?
Again, so excited to find this. Any help is appreciated.
Hello Sue,
I'm sorry for the extremely late reply. I didn't see your post until today.
The jspdf.min is a library of code that does the heavy work of creating the pdf.
The only code that you should be editing is in the createbook.js file.
Below is a partial screen shot of the code inside of createbook.js
The header is comprised of a png image. This image was converted into Base64 code so it can be included inside of the javascript.
To convert my png image to Base64, I used this website: https://www.base64-image.de/
I copied the generated code from that website into Line 4 inside of CreateBook.js
Now the image is stored inside of a variable called imgData.Line 6 of the code creates a blank pdf.
Line 8 gets my Storyline Variable called Page1 and stores it in a variable called p1.
Line 9 is code that adds in line breaks after every 530 pt.
Line 10 is the header image. The 60, 30 is the x and y position to place the image. The 500, 93 is the width and height of the image.
Line 11 adds our text with Line breaks to the pdf. The 40, 160 are the x and y position.
Line 12 and 13 are for the footer.
Line 12 adds a line. It is passed four numbers. The X and Y start position and the X and Y end position. The line is drawn between the start and end points.
LIne 13 adds in the page number. Again it has an X and Y position and is set to align right.
Now page 1 is done.
Line 15 starts a blank page 2.
You keep repeating lines of code 8 -13 for each page.
Finally at line 88 is the code that saves and downloads the pdf.
Hi Russell,
This code, the files and the videos have been very helpful in getting me started with a PDF download.
However, is there a way to adjust the size of the text from within the createbook.js file?
I'm no javascript expert so just muddling my way through. I have text that is set in the storyline variable but is a little too long and wraps underneath, and overlays on the next line - smaller text on the same line would be ace!
