Forum Discussion
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)
89 Replies
Hi Prathiba
Not sure to that as I don't have Rise only S3, perhaps someone else in this stream can answer the question.
Unfortunately, I still haven't resolved my original issue as no-one came back with a solution to my problem.
Sorry I couldn't be more help
Hi Ryan
Thanks for getting back to me and appreciate the time you have taken to answer my query. You were spot on, I had more than one HTML file in the folder and when I moved the certificate file and the pdfmake folder into their own new folder, it all linked as expected. Such a small mistake on my part!!!. Thanks again
Hi Chris,
I realise, I am trying to sort this out for a project. Wondering if you can print screen your file folder structure? I am tinkering with the set up but still not there.
Lara
You're awesome, Ryan!
Very Very perfect!! Tks Ryan!
But i have a problem.
After change de Title in Storyline 3, the certificate doesn't change.
Could someone help me, pleasee ?The title should be a vaiarible in storyline not the player title
Tks Phil, but i think not... because Java doesn`t have text. Look the pic.
Or please tell me where i change ;)
This is on the very first slide of the course provided by Ryan
In this example the user is asked to enter their name and then answer a question. If the user scores 100% they can download the PDF certificate. The users name, project name and date are included on the certificate. (Note the project name is set in the variable projectTitle)
Hi everybody
Can anybody help me to understand how to create the index.html file? What do i need to do?
I´m trying to replicate the example to my project.
I would appreciate your help :)
Hi Oscar - I am going to try and work that out too and will let you know how I get on!
I found this which I am hoping will be helpful!
https://www.rabbitoreg.com/2018/08/16/articulate-storyline-to-create-a-customized-pdf-on-the-fly/
I'm not very savvy when it comes to javascript. How difficult would it be to add my companies logo and name to the PDF?
Hey Ryan, I've downloaded your source files, but I couldn't get it to publish a PDF. I didn't change anything except delete and re-add the web object to reflect it's new location on my local drive. Is there a way to get your file to work on my side?
In regards to this solution not working locally, it seems this solution only works when the web object is uploaded to a web server. To test, you can publish as LMS SCORM output, then upload to 'SCORM Cloud' (https://rusticisoftware.com/products/scorm-cloud/). Create a free login and it will allow you to upload your SCORM zip file. Then launch and it will work.
Refer to this reply from Ryan:
https://community.articulate.com/discussions/articulate-storyline/storyline-360-generating-a-pdf-certificate-using-javascript#reply-531709
Hello, has anyone had luck adding a font to pdfMake for the certificate? I have been struggling with this as Roboto is the default. I found the pdfMake documentation and many js articles on how to do so but can't get a font implemented. I have converted a fontset to base 64, tried adjusting the "vfs_fonts.js" file as well as creating a new class in the user.js file and referencing in my text fields but not having success. Thanks!
I have replaced the default Roboto font with my preferred font and it worked for me. Did you update the 'pdfmake.js' file as well?
Do you try to have multiple fonts in the PDF or just change the default font? I haven't had multiple fonts in "vfs_fonts.js" file but replacing the font worked for me.
Thanks, I did not try to replace it, I do have two fonts I need to use, so I added them to the vfs file. I know Roboto is listed as default in pdfmake.js, but I did not make a change there. Thank you for responding.
