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)
- JamesBennett-23Community Member
Thanks for this, will definitely come in useful.
Thanks for popping in to share Ryan :)
- AmeySawant-ef94Community Member
Thanks Ryan for sharing the updated version of the PDF Certificate sample.
- TraciCommunity Member
Ryan, Thank you for posting this! This has been a lifesaver. I was able to make a PDF report for learners completing a self-rating assessment in SL, and so far testing has gone super well!
- PatrickHenningCommunity Member
I know this is an older thread, however i need some help. Ryan it seems i am able to use this when I upload to Articulate Review, however I have a client that will be using this feature (and the rest of the Storyline I am designing) offline. I have Published just the files you provided as 'CD' and this will not work, but again, it does work when I upload to Articulate Review. Is this because the web object needs the internet to work, or is there something I am missing?
Is there any sort of workaround for this?
I have tried a number of the different 'Certificate Generation' ideas people have had listed here - https://community.articulate.com/discussions/building-better-courses/six-ways-to-generate-a-certificate-of-completion and these will not work. I recently tried a solution that overlays Javascript over a GIF file, but there i am running into issues with printing (specifically the JS does not print)
Any ideas?Thanks!
- RyanLowryCommunity Member
Just had a quick play and confirm that certificate generation doesn't work when publishing to CD. I think launch_story.exe effectively opens the content using Internet Explorer. However if you open story.html directly with IE the certificate downloads fine. Access to developer tools is blocked when accessing with launch_story.exe as well so i can't see if there are any error messages in the console.
- PatrickHenningCommunity Member
I was wondering if anyone would be able to help me out with an issue i am having with generating a PDF certificate using Javascript. This is the same problem I was having before and I was wondering if anyone could give me a hand getting this to work (I am not all that savvy with Javascript)
In the story_content folder i added a folder called certificate. In that file is a .gif file of the certificate i want to use and a JS file that would put the learners name and date overlayed over the .gif. The name is pulled from a variable entry on the first slide. This also has to be able to be done OFFLINE, and then printed, hence the reason I am using this method.
In the attached zipped folder is a published version of the storyline, as well as the .Story file itself.
Any help would be greatly appreciated! Thanks!
- ClaireDervout-7Community Member
Hi Patrick,
Unfortunately, I am unable to help you as I am experiencing the same issue with the certificate. The client would like the learners to be able to print a personalised PDF from an offline module (CD export).
Have you managed to find a solution to your problem?
Thanks
Claire
- MichaelRischeCommunity Member
Thanks for this input!
I'm quite new to Articulate and I was working on this solution to get a certificate at the end of the training. But it seems that I'm doing something wrong.
I already changed the link to the folder with the certificate.html on the success layer but nothing happens when I click on the download button after finishing the training.
I tried different settings when I include the web object, but it still doesn't work.
If someone could give me a hint, what else I could try, I would be more than grateful!
- ChrisCliftCommunity Member
Hi Ryan
I have really enjoyed your pdf certificate print facility and I have designed a template that works fine when I click directly on the certificate.html (I've actually called it DCS_certificate(Master).html) but I don't think my issue is related to the name change. I have modified the Execute javascript accordingly to it now reads
// Name of the certificate html file
var certFilename = 'DCS_certificate(Master).html';The issue I am having, and maybe I'm missing something here, is that when I delete the web object and insert a new one, Storyline says there is no 'index.html' file in the folder, whereas, looking at the examples you have produced there doesn't need to be one, since the web object should point to the DCS_certificate(Master).html. How do I get it to link back correctly?
Thanks in advance
- RyanLowryCommunity Member
Chris Clift
Hi Ryan
I have really enjoyed your pdf certificate print facility and I have designed a template that works fine when I click directly on the certificate.html (I've actually called it DCS_certificate(Master).html) but I don't think my issue is related to the name change. I have modified the Execute javascript accordingly to it now reads
// Name of the certificate html file
var certFilename = 'DCS_certificate(Master).html';The issue I am having, and maybe I'm missing something here, is that when I delete the web object and insert a new one, Storyline says there is no 'index.html' file in the folder, whereas, looking at the examples you have produced there doesn't need to be one, since the web object should point to the DCS_certificate(Master).html. How do I get it to link back correctly?
Thanks in advance
Hi Chris, sorry, I haven't been following this thread recently. Do you have more than one html file in the web object folder? In my testing Storyline 360 will allow you to add a web object with an html file of any name when there is only 1 html file present. If there is more than 1 then you must have an index.html file.
- PrathibaSrir570Community Member
Hi, is this something that can be imported into Rise as well as a Storyline block?
Thanks.
- RyanLowryCommunity Member
Prathiba Sriram
Hi, is this something that can be imported into Rise as well as a Storyline block?
Thanks.
Hi Prathiba, this seems to work.
https://rise.articulate.com/share/LnHZIPLAphHrpweEXdORNWFEZ9ranVGA
Thanks for the continued help, Ryan!