Storyline 360 - Generating a PDF Certificate using JavaScript

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

I really appreciate you sharing this valuable information.

And next question - how do we get the download to have a name rather than file.pdf?

so it needs the quote marks rahter than this

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

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

Matt I wish you hadn’t said that, I just built a CV builder using Storyline with a PDF output and now I am going to have too go and change it!

Hi Ryan, not sure what we are doing wrong. We followed all the steps but still can't seem to make the course work to produce the certificate when published to Articulate Review, or the LMS sandbox we use. The only difference I can see from your example Story file and ours is on the "Success" layer of your last slide there is a "web object" but I'm not seeing in the steps how this Web Object is established in the Articulate Story file. Would you be able to provide clarity on how we can establish this?

Thank you in advance!

Doug

Are you also able to share the files from the web object embedded on the success layer of the results slide?

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();

    }

}