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.
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!
Hello Lewis,
To change the font size use this line of code:
doc.setFontSize(22);
