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 cha...
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
Hi Doug, the Source.zip file attached to the original post contains a folder certificate with the required files for the web object that you'll need to insert. In the example it is inserted on the success layer of the results slide but you can insert it anywhere you see fit.
Insert > Web Object > Select "certificate" folderHi Ryan, sorry to bother you again, I'm still having trouble getting this to work on our end. If I publish your course example to 360 Review or our Internal LMS it works fine, but the course I built doesn't. Of course my web address is different from yours but I'm also not clear on how your example is pulling the certificate from that address and incorporating it into your .Story file. Would the problem be with my Java script or the location of my file or something else. I'm at a loss.
Below is the JS we wrote:
var player = GetPlayer();
var date = new Date();
var day = String(date.getDate()).padStart(2, '0');
var month = String(date.getMonth() + 1).padStart(2, '0');
var year = date.getFullYear();
var issuedOn = month + '/' + day + '/' + year;
var expiresOn = month + '/' + day + '/' + (year + 3);
var uName = player.GetVar("uName");
var doc = new jspdf.jsPDF({
orientation: 'portrait'
});
var img = new Image;
img.onload = function () {
doc.addImage(this, 'png', 0, 0, 230, 305);
doc.setFontSize(10);
doc.setTextColor(77, 77, 79);
doc.setFont('Helvetica', 'normal');
doc.text(uName.trim(), 19, 31, null, null, 'left');
doc.text(issuedOn, 32, 43, null, null, 'left');
doc.text(expiresOn, 32, 50, null, null, 'left');
doc.save("Certificate.pdf");
};
img.crossOrigin = "";
img.src = "certificate.png";Hi Doug, there are 2 parts to this, a JavaScript trigger in Storyline and then an embedded web object. The trigger in storyline calls a JS function within the embedded web object which generates the PDF.
In my example you'll see that there is an embedded web object on the Success layer of the Results slide. This embedded web object isn't pointed at a URL but at a local folder on my computer called certificate, a copy of which you can find in the Source.zip file attached to the original post. When you publish a project, Storyline embeds all of the files within the local folder in the published output. Full details on adding web objects can be found here. You'll see there is also a JavaScript Trigger on the Success layer, this calls the function generatePDF() found in certificate.js in the embedded web object.
You need to do something similar in your own project. I'd suggest copying my setup exactly before modifying it as you see fit. I note you are using jsPDF rather than PDFMake to generate the PDF file, either should work, I honestly can't remember why I chose PDFMake over jsPDF.
Where have you placed the code you shared?
