Exporting Text Entry into a PDF

Jun 03, 2021

Hi all,

I'm quite new to Storyline (and also Javascript).  Following an excellent tutorial of how to code some simple JavaScript and add it as a trigger, I created this simple test to see if I could get what's entered into a text box to populate a pdf, or rather a png image that then downloads as a pdf.  Everything seemed to work fine when exporting it to HTML5, as seen in the example here:


It automatically adds a date and populates my text box areas.

But I don't get the same functionality when exporting as a scorm file and uploading to Talent LMS.  Does anyone know if jsPDF only works in HTML5 exports?  Should this function the same way when the scorm is uploaded to an LMS?

I'll attach my Storyline file and Storyline Output also.  (For those trying to export straight from Storyline, it won't work until you add in the png source file for the pdf background and also add in an additional line of code to story.html to enable the jsPDF).  The png and line of code are present in the output zip file. 

I was following an excellent tutorial I found here:


Last question (maybe more of a jsPDF question): does anyone know how to make the exported text wrap in the pdf document that is generated?

5 Replies
Russell Killips

Hello Stephanie,

Sorry, I don't know why it doesn't work in the lms.

To make the text wrap, use the splitTextToSize function.

var date = new Date();
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0');
var yyyy = date.getFullYear();
date = mm + '/' + dd + '/' + yyyy;
var player = GetPlayer();
var q1 = player.GetVar("question1");
var q2 = player.GetVar("question2");
var q3 = player.GetVar("question3");
var doc = new jsPDF({ });
q1 = doc.splitTextToSize(q1, 134);
q2 = doc.splitTextToSize(q2, 134);
q3 = doc.splitTextToSize(q3, 134);
var img = new Image;
img.onload = function() {
    doc.addImage(this, 0, 0, 216, 279);
    doc.setTextColor(0, 0, 0);
    doc.text(q1, 61, 70, null, null, 'left');
    doc.text(q2, 61, 133, null, null, 'left');
    doc.text(q3, 61, 196, null, null, 'left');
    doc.text(date, 170, 42, null, null, 'center');
    doc.save("Learning Plan.pdf");
img.crossOrigin = "";
img.src = "fillablepdf.png";

Sofie Wouters

Hi there,

I saw how Russell got the problem from Stephanie solved. I used almost the exact same code derived from the same link Stephanie mentioned (i.e. https://www.devlinpeck.com/content/generate-pdf-elearning). I exported it to SCORM, to get it to work on our company LMS (i.e. Totara Learn). I also added this line of code* to the story.html and the index_lms.html before I converted it to ZIP, as I read in the link. And the png-image to the file offcourse. In attachment all the relevant files (2nd attachment: storyline-file, 3th attachment: scorm-file).

*<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>

  1. With the latest update of Storyline, I don’t see the option to export it to html5 only (see 4th attachment: 'screenshot_publish in storyline'). Do I look over it or is this by default the case?
  2. When I want to upload the SCORM to our LMS, I get this error in red in dutch (see 1st attachment 'screenshot_error'), which means so much as: “An imsmanifest.xml file was found, but not in the root of your zip file. Recreate your SCORM package.”. I retried several times by republishing in SCORM and adding the codelines and png-file again, but the error on the LMS remains. How do I solve this issue first, so that I am able to finally test if the scorm-file is actually generating the PDF?

Any help is very much appreciated! Thanks in advance!!