Storyline 360 - Generating a PDF Certificate using JavaScript

This example demonstrates how to use the pdfmake JavaScript library to generate PDF certificates in the browser using Storyline 360.

This is a followup to my original post found here. The only changes from the original are that this is now a Storyline 360 project and pdfmake has been updated to the latest version (v0.2.4 at time of posting).

The linked example provides a brief overview of how this works. I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS.

The attached source files contains a basic .story file as well as a folder (certificate) that includes the required HTML and JavaScript that needs to be included within a web object within the project.

The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.

Feel free to have a look and re-use if it's useful.

(21/03/2022 - pdfmake updated to v0.2.4 and example link replaced)

85 Replies
Ryan Lowry

Doug, looking at the .story file you've provided I think you are mixing two different methods of generating a PDF in Storyline. Were you following this tutorial by any chance? Rather than embedding a web object which contains the files required to generate a PDF you need to edit the published output and modify it to include the files required to generate the PDF. This is described towards the end of the tutorial under the heading "Publish and Modify the eLearning Output".

If you wish to follow the method outlined in this post you'd need to copy the JavaScript trigger as found in the .story file in Source.zip e.g.

// Name of the certificate html file

var certFilename = 'certificate.html';

// HTMLCollection of elements of type iFrame

var iframeElements = document.getElementsByTagName("iframe");

// Iterate over the iFrameElements HTMLCollection

for (var i = 0; i < iframeElements.length; i++) {

  /* If src of current iFrame element equals the filename set in variable

     ** certFilename call the generatePDF() function.

     */

    var src = iframeElements[i].getAttribute('src');

    if (src.indexOf(certFilename) != -1) {

        iframeElements[i].contentWindow.generatePDF();

    }

}
Doug Dewan

Hi Ryan, sorry I think you are correct. We are working with IT and believe I have misdirected them showing two methods.
Ideally we would like a solution that does not require modifying files each time so believe your solution is the best for that as it addressed it for each publishing with out having to add files after, is this correct?

Ryan Lowry

Hi Doug, it looks like you replaced the background image certificate.jpg with certificate.png. In the browsers console we can see this is causing an error as the image file cannot be found.

You either need to convert your image to a .jpg called certificate.jpg or update line 53 of certifciate.js in the web object source files to reflect the filename of the image you wish to use for the certificates background.

You also need to update line 35 of certificate.js to reflect the name of the variable you are using for the learners name ("uName").

Remember you will need to first delete and then re-add the web object when you make any changes to it.

Doug Dewan

Hi Ryan, thank you so much for your assistance and patience in walking me through this. I've been able to make it generate the PDF certificate! The formatting is off for the text placement and paper size but think we can fix that. I assume we would update the "certificate.js file for this correct and not the js in the Storyline trigger? 

I think this is where I get confused, there are two places for the js content, one in the Storyline course success layer that executes the js file that is in the web object folder. The one in Storyline is just used to trigger the js in the folder, any modifications to the certificate and content on the certificate would be then done to the file in the folder, would this be an accurate assumption?

Ryan Lowry

Hey Doug, can't say it's something I've looked into. I don't think it will be possible to attach a PDF certificate generated on the client side to an email and send it. Others on the thread might have some bright ideas.

It might be better to let an LMS handle the certificate side of things if you have that option? Moodle for example with an appropriate plugin provides the option to issue certificates based on completion of an activity such as a Storyline SCORM. These is an option to email certificates and you get the benefit of centralised recording of learner progress.

Doug Dewan

Thanks Ryan, yes ideally we would have hoped the LMS would do that however ours does not. We use Workday Learning. WDL says the authoring software should do the certificate functionality and Articulate Storyline says the LMS should be performing the certificate functionality, so neither seems to want to own this with seems very odd to me as so many people require this functionality. Once again, thank you for all your help and insight in finding this solution to address the gap!