Storyline 360 - Generating a PDF Certificate using JavaScript

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.

HI - me again - so the trigger to run the weboject is no longer the simple:

window.frames[0].frameElement.contentWindow.createPDF();

As i note in the source file it is a WHOLE lot more complicated than before! (is that because the number of iframes within the file could be >1? )

Hey Matt - glad it's you!  yes - all our videos are webojects. (Vimeos - need to talk to you about that too - covid got me)

Doh should have replied using this function - SOZ

Hi there. My pdf works when I used the pdfmake route. I need to change the font that the pdf is using though. The default font is Roboto and I would like to use a custom font. Does anyone know how to do this? Your help would be appreciated.

Hi,

I'm building a course that will have an auto-generated PDF certificate.

Thanks to this discussion I finally get some results, but I want to understand how it works and why?

I wonder how toryline knows to include data, files etc from an external folder when publishing, in this case a folder called "certificate"?

Why does torylineline not include my files, placed in the "certificate" folder when publishing so they are not includ automaticly in to the final project (in contrast to the files placed by the author of the project wchich are automaticly include)?

I thought it was somehow defined in the webobject (since after publishing all the data is in the story_content\WebObjects folder), but in the project there is only one web object which only contains a reference to the drive location of probably the creator of the project.

Can someone smarter can explaind me how dose it work?

I cannot figure out how to resize the pdf properly. Does anyone know how?  I have an image that is 2500 pixels wide, but it only shows the top left corner of it. I changed the code in the certificate javascript file to the below, but again it only shows the top left corner. Is there something else that needs to change? Thanks for any help! (I also don't know what the ".89" is for after the width, but when I remove it, no pdf is created)

background: [
{
image: 'certBackground',
width: 2500.89,
height: 1768.28
}
],

Has anyone had success changing the size of the background?

Hi Hero's, hoping someone could steer me in the right direction. Ryan was so helpful a few years back in assisting us in developing a PDF certificate for a course we designed. The test file worked for us at the time. As it's been a long time I can't seem to reproduce the function in a new course. I have everything exactly as the previous but when I publish to review it doesn't produce the certificate. I know there was some steps required prior to publishing to enable the java script to pull the certificate detail - but my notes are unclear on how this works when publishing to review and was hoping someone would be able to provide some clarity on this. Fingers crossed. 

Using the pdfmake JavaScript library involves including code that generates the pdf certificate from a base image and then carefully overlaying and positioning the text you want to appear on the page. This is a great approach but...

...there is an alternative approach which involves creating the certificate outside of Storyline just as a pdf form and then using the pdf-lib Javascript library inside Storyline to fill in the fields in the form.

This has a number of advantages:

1. The JavaScript code is easier.
2. You can change the certificate layout and edit the pdf without having to modify your JavaScript code.
3. The same JavaScript code can be used for multiple certificate layouts so long as the field names are the same.
4. The pdf-lib JavaScript library is built so you can load the rotines you need (and only those you need) at run-time. This means you don't need to modify the HTML after publishing.

I don't have a certificate example but I am running a FREE on-line workshop/ discussion next week (Tuesday) that will walk through and demonstrate the steps to create a downloadable course handout including learner's own notes using pdf-lib. The principle is the same as creating a certificate.

If anyone is interesting in joining this workshop please send me a message and I will provide a link.