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.0 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.

65 Replies
Phil Mayor

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'
},

 

 

 

Matthew Bibby

Great! Just so you know, in JavaScript, single and double quotation marks are interchangeable. 

So this is valid:

pdfMake.createPdf(docDefinition).download('Capability 5.pdf');

And this is valid:

pdfMake.createPdf(docDefinition).download("Capability 5.pdf");

But this is NOT valid:

pdfMake.createPdf(docDefinition).download('Capability 5.pdf");

This is also NOT valid:

pdfMake.createPdf(docDefinition).download('This won't work.pdf');

However, this is okay:

pdfMake.createPdf(docDefinition).download("This'll work.pdf");