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)
Thanks for popping in to share Ryan :)
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
I would build outside of a table:
{
text: "Certificate of completion",
bold: true,
color: '#3e313e',
fontSize: 14,
bold: true,
alignment: 'left',
// margin: [left, top, right, bottom]
margin: [0, 25, 0, 0]
},
{
text: D1 + " " D2,
bold: true,
color: '#3e313e',
fontSize: 11,
alignment: 'left',
// margin: [left, top, right, bottom]
margin: [0, 5, 0, 0]
},
{
text: "completed the eSafety Early Years module",
//bold: true,
color: '#8B8B8B',
fontSize: 11,
alignment: 'left',
// margin: [left, top, right, bottom]
margin: [0, 0, 0, 0]
},
{
text: "We SAY and SHARE with technology",
bold: true,
color: '#3e313e',
fontSize: 11,
alignment: 'left',
// margin: [left, top, right, bottom]
margin: [0, 10, 0, 0]
},You way this should work
{
table: {
heights: [100,100,100,100],
widths: [500],
headerRows: 3,
body: [
['Certificate of completion'],
[D1 + " " D2],
['completed the eSafety Early Years module'],
['We SAY and SHARE with technology'],
]
},
style: 'header',
alignment: 'center',
layout: 'noBorders'
},Also can save some time with:
var D1 = player.GetVar("firstName");
var D2 = player.GetVar("LastName");No need to define the variables first
Hence the tag 'hero'!
Knew someone would be able to whip out a solution in next to no time. Thank you Phil!Next question then for you super hero - how do you name the file rather than collection of alphabet soup?
You could also include variables in the filename e.g. the learners name.
pdfMake.createPdf(docDefinition).download('Certificate_' + firstName + '_' + lastName + '.pdf');Resulting filename for a learner called Joe Bloggs would be Certificate_Joe_Boggs.pdf
I am with Ryan on this one, I always include a variable for the filename and if it relates to someone add their name into the filename.
Thanks for this, will definitely come in useful.
Thanks Ryan for sharing the updated version of the PDF Certificate sample.
Ryan, Thank you for posting this! This has been a lifesaver. I was able to make a PDF report for learners completing a self-rating assessment in SL, and so far testing has gone super well!
I know this is an older thread, however i need some help. Ryan it seems i am able to use this when I upload to Articulate Review, however I have a client that will be using this feature (and the rest of the Storyline I am designing) offline. I have Published just the files you provided as 'CD' and this will not work, but again, it does work when I upload to Articulate Review. Is this because the web object needs the internet to work, or is there something I am missing?
Is there any sort of workaround for this?
I have tried a number of the different 'Certificate Generation' ideas people have had listed here - https://community.articulate.com/discussions/building-better-courses/six-ways-to-generate-a-certificate-of-completion and these will not work. I recently tried a solution that overlays Javascript over a GIF file, but there i am running into issues with printing (specifically the JS does not print)
Any ideas?Thanks!
Just had a quick play and confirm that certificate generation doesn't work when publishing to CD. I think launch_story.exe effectively opens the content using Internet Explorer. However if you open story.html directly with IE the certificate downloads fine. Access to developer tools is blocked when accessing with launch_story.exe as well so i can't see if there are any error messages in the console.
I was wondering if anyone would be able to help me out with an issue i am having with generating a PDF certificate using Javascript. This is the same problem I was having before and I was wondering if anyone could give me a hand getting this to work (I am not all that savvy with Javascript)
In the story_content folder i added a folder called certificate. In that file is a .gif file of the certificate i want to use and a JS file that would put the learners name and date overlayed over the .gif. The name is pulled from a variable entry on the first slide. This also has to be able to be done OFFLINE, and then printed, hence the reason I am using this method.
In the attached zipped folder is a published version of the storyline, as well as the .Story file itself.
Any help would be greatly appreciated! Thanks!
