Creating a pdf file from Storyline running under an LMS

You don't need to save the PDF.

Just save the data it includes in SL variables and that info will be stored in the LMS.

Then, when the learner revisits, they'll be able to regenerate the PDF using the same info.

Thanks Matthew

What I'm doing is getting the learner to complete a questionnaire using sliders - I capture their responses and then create a pdf using the javascript jspdf library with their responses in it on a kind of grid .

I then allow the learner to be able to download the pdf with the results in - this is done using the javascript Filesaver library.

The Storyline works fine if loaded to a webpage.

If I compile the course for an lms (and make the necessary changes to include the javascript libraries I'm using) and then run this code from a website (or even my own pc, as I'm not loading an image), It also works fine - I get the prompt to open or save the pdf (see attached screen - client name redacted).

But obviously, the run environment is different when the same code is being run under an lms - I have tested the code loaded into Moodle and the learner doesn't get the prompt.

There's clearly a difference in the way the lms displays the course - presumably in some form of frame - I just wondered if anyone had taken a look at this and could steer me in the right direction?

All the best, John

I use jsPDF in Learning Management Systems all of the time, including Moodle.

Check the JS console for errors, should be easy enough to fix.

Matthew - great idea - why didn't I think of that?

actionator::exeJavaScript - jsPDF is not defined
(anonymous) @ bootstrapper.min.js:38

Not sure why that is though.....

You've likely got your script in the story.html and not the index_lms.html.

You are correct - I have. At least the

Yep, for use in an LMS it should be. There may be another change you need do make... but likely not. Let me know.

It works perfectly!     Matthew - you are a star!!

Had a feeling that'd be the case. Glad you are good to go now. Next time you have issues with this stuff feel free to reach out.

Hi Matthew

Can I be really cheeky and ask another question? I have the pdf creation working great - thanks to you! But I'm now experimenting with adding a background image to the pdf using doc.addimage in the javascript.I have the necessary jspdf libraries loaded (I think) but I'm running into a CORS problem - I've checked other examples (like Devlin Peck's tutorial) and have included a img.crossOrigin statement just before declaring the image source (the image is in the output folder):

You can ask as many questions as you want John! I'm happy to help where I can.

Pop your image up on a server somewhere and use the URL, rather than referencing the image on your hard drive. Another option is to convert your image to Base64 and use that instead.

Wow - swift response - thanks. I will try both of those.

Let me know how you get on.

Again your advice sorted my problem out instantly - I was being a complete dork! Of course I needed the image on a server - which, if I was testing my code on a web server, instead of on my local system, it would be! There are times I can be so dumb!

I guess the clue was in the error message "Cross origin requests are only supported for protocol schemes: http...." didn't really need to read further.

Loading the code I already had onto my server meant it ran perfectly... background image successfully added to pdf - just have to line my text up with the form, which is what the background image is and I'm good to go.

This happens to me as well. I throw my hands up in frustration before reading the rather clear error message! Glad your are good to go now.

Hi John and Matt. I've used the Base64 method for background images but haven't tried the server method. What would that code look like? Apologies if this is super basic JavaScript.

On a related note, if I want to reference the online version of jsPDF instead of packaging it with the course, how do I do that? Do I add some version of the code below to the story.html file?

<script src="https://unpkg.com/jspdf@latest/dist/jspdf.umd.min.js"></script>

Last question :)

Do either of you know how to use a web object to avoid having to edit the story.html file after publish? I saw a post about it a while back but didn't fully understand it.

Hi Mark

My code now looks like this:

//Create pdf
var doc = new jsPDF();
var img = new Image;
img.onload = function() {
   doc.addImage(this, 'PNG', 0, 0, 210, 297);
   doc.setFontSize(12);

   then I add all the text to the document

   doc.save('Inventory.pdf');
}
img.onerror = function(e) {
console.log("Error code",e);
}
img.crossOrigin = "";
img.src = "Inventory.png";

So "Inventory.png" is the name of my background image for my pdf and needs to be in the storyline output root folder. I am creating an A4 document in portrait. If you want to create a landscape form just swap the "210" and "297" parameters to load your png image and add 'landscape' to the new jsPDF line:

var doc = new jsPDF('landscape');

should do it

Hi Mark

You should be able to use the construct you have given to load the latest version of jsPDF as you suggest.

But a bit of a heads up - some of the examples you will see posted here on heroes pre-date V2.0.0 of JsPDF - (in fact I use jsPDF V1.5.3) - So whereas I would load 'jspdf.debug.js' you, correctly, are loading "jspdf.umd.min.js"

As per the release notes for v2.0.0:

"We renamed the files in dist for consistency: jspdf.debug/min.js is now jspdf.umd(.min).js"

I mention this in case anyone else is confused when they look at earlier code examples.

Cheers, John

Matt - do you know if the 'jspdf.umd.min.js' has the addimage library code in it?? That was the problem with older versions of 'jspdf.js' as I recall.

Thanks for all of your answers, John. I really appreciate it.

Happy to help. 

Having re-read you question - I guess I should also point out that my original error was not my code - but that I was trying to run the code above from a compiled version of my Storyline course on my local PC.

That won't work because the browser is complying with with the CORS (Cross Origin Resource Sharing) security protocol designed to prevent malicious files being loaded. Ironically, files on the same PC accessed via a file reference i.e. no "http: address" are not assumed to come from the same "origin" and therefore trigger a CORS error when the HTTP request to load the image (addImage) is executed.

When I moved the code and ran it on a server (I have my own cloud server but you could use Amazon or Microsoft Azure Cloud storage) the code runs fine because the file is accessed via it's http: address and the img.CrossOrigin ="": command basically tells the browser to accept an 'anonymous' unauthenticated image i.e. switch off the CORS check in the HTTP request.

Sorry that got a bit technical. In simple terms, you have to load the compiled web code with the image in the root folder onto a server for it to work - it won't work if you run it on your PC.

Thanks for the explanation, John. I've come accross a CORS error once or twice and wasn't sure what it meant. I've been using FTP for testing, as custom fonts seem to cause problems locally, too.

One more question, if I adapt the code you shared earlier and want to have different background images on each page of a multipage PDF, what would you suggest? I know how to generate new pages and suspect I would name images sequentially (page1.png, page2.png, etc.). Not quite sure of the other step, though...