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.1.35 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 linked 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.

38 Replies
Jeff Forrer

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!

Sanduni Fernando

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.

 

Sanduni Fernando

Though I haven't used multiple fonts, the following links may be useful:

https://pdfmake.github.io/docs/fonts/custom-fonts-client-side/

https://github.com/bpampuch/pdfmake/issues/673

I think you have to update"pdfmake.js" as well. Make sure to include this in index.html file as the "pdfmake.min.js" is called in the default file.

Sanduni Fernando

Yes, I just converted the font to base64 using https://www.base64encode.org/enc/font/, and replaced the Roboto values in between " "  in vfs_fonts.js file. If you want the bold and italic fonts, you can do the same or if you need only the regular style, you can just remove them from the vfs_fonts. js file (Roboto-italic, Roboto-medium and Roboto medium italic)

Joshua Cooper Darlington

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.

Mary Teresa Goeman

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 :)