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 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).
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)
89 Replies
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.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 :)
That just means you have a bug in your code somewhere.
Very useful - but the documentation is rubbish!
Hi - I can't access the source files in the orginal post - can someone help me? thanks!
Hi - i can't download the source files - can anyone share them with me?
Hi Kate - I've attached the source files to the original post.
LEGITIMATE hero!
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.
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..
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.
I wondered if anyone could give me direction on how to edit the "lorem ipsum" text on the certificate?
Hey Jessika. That text is part of the SVG background image used in the example. You'll find this included inline within certificate.js on line 45 as shown below. This isn't easily editable. Instead you'll probably want to specify your own background image.
background: [
{
svg: 'SVG_BACKGROUND_IMAGE_INCLUDED_HERE',
width: 841.89,
height: 595.28
}
],You can find more about including SVGs in the pdfmake docs - https://pdfmake.github.io/docs/0.1/document-definition-object/svgs/
Alternatively you could insert a jpeg of your own design - here: https://pdfmake.github.io/docs/0.1/document-definition-object/images/
i am SO super delighted that i've managed to ALMOST create a certificate. HOWEVER, I can't for the life of me work out how to get the variables in.
I have spent 3 hours on it and i'm going nuts.also - not sure how everyone else gets their code in that fancy grey box......
function createPDF() {
var D1 = '';
var D2 = '';
var player = parent.GetPlayer();
D1 = player.GetVar("firstname");
D2 = player.GetVar("lastname");
//var docDefinition = { content: 'This is an sample PDF printed with pdfMake for '+name+"!" };
var docDefinition = {
content: [
{
table: {
heights: [100,100,100,100],
widths: [500],
headerRows: 3,
body: [
['Certificate of completion'],
[HOW THE HELL DO I GET THE VARIABLES HERE?],
['completed the eSafety Early Years module'],
['We SAY and SHARE with technology'],
]
},
style: 'header',
alignment: 'center',
layout: 'noBorders'
},
