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). Example 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

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

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

Storyline 360 - Generating a PDF Certificate using JavaScript

PeterGallup-3a7
Community Member
5 years ago
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?
JoannaLau
Community Member
5 years ago
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?
- ChrisM-2d302595
  Community Member
  5 years ago
  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
JeffForrer
Community Member
5 years ago
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!
- SanduniFernando
  Community Member
  5 years ago
  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.
  - JeffForrer
    Community Member
    5 years ago
    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.
JoshuaCooperDar
Community Member
5 years ago
Thanks for info on using pdfmake as a web object!

I have everything working great except for custom fonts. When I try to add custom fonts to the HTML file. the PDF fails to print. I'm following all the instructions provided in pdfmake's github pages.

I havent been able to find the cause of the bug but I ran across an old message board where JohnWemmick rand into a similar problem and said: "Found the problem. It was a problem with Articulate, not the pdfMake"

Is anyone familiar with this problem? Or do they have a working version with a custom font that I can use as a template?

I'm hoping to use brand fonts for the certificate instead of the default Roboto.
MaryGoemanRealo
Community Member
5 years ago
Hello! When I edit the certificate.html using Atom or Code Writer - and then I delete and reinsert the web object the "download" button doesn't work upon republishing. Is there something I'm missing?

It will work fine and then I'll edit the html file, reinsert the web object and then nothing downloads.

I would appreciate any help :)
- JoshuaCooperDar
  Community Member
  5 years ago
  That just means you have a bug in your code somewhere.
AdamBayliss-16a
Community Member
4 years ago
Very useful - but the documentation is rubbish!
KateMackenzie
Community Member
4 years ago
Hi - I can't access the source files in the orginal post - can someone help me? thanks!
KateMackenzie
Community Member
4 years ago
Hi - i can't download the source files - can anyone share them with me?
- RyanLowry
  Community Member
  4 years ago
  Hi Kate - I've attached the source files to the original post.
  - KateMackenzie
    Community Member
    4 years ago
    LEGITIMATE hero!
LeslieMcKerchie
Staff
4 years ago
Hi Kate,

It looks like Ryan's files were not shared directly to the forums as an attachment, but on another website. You are welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.
AdamBayliss-16a
Community Member
4 years ago
Hi all, nice to see this thread busy today! - I must admit I'm struggling with the Fonts - I found the instructions here: https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/vfs/ but I'm not sure I understand.. "When you run command node build-vfs.js "./examples/fonts" in the pdfmake package directory.... How do I run command node build-vfs.js exactly? - Thanks for any advice..
- RyanLowry
  Community Member
  4 years ago
  Hi Adam, since this example was 1st developed PDFMake has received significant updates. It's now possible to link to font files by URL. See here - https://pdfmake.github.io/docs/0.1/fonts/custom-fonts-client-side/url/. I've updated the source files on my original post to include a version of PDFMake which should support this. I haven't tried it myself so not sure if / how well it works.