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)
- 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
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!
- ChrisCliftCommunity Member
Hi Prathiba
Not sure to that as I don't have Rise only S3, perhaps someone else in this stream can answer the question.
Unfortunately, I still haven't resolved my original issue as no-one came back with a solution to my problem.
Sorry I couldn't be more help
- PaigeStewartCommunity Member
You're awesome, Ryan!
- TatianeZFCommunity Member
- PhilMayorSuper Hero
The title should be a vaiarible in storyline not the player title
- TatianeZFCommunity Member
- PhilMayorSuper Hero
This is on the very first slide of the course provided by Ryan
In this example the user is asked to enter their name and then answer a question. If the user scores 100% they can download the PDF certificate. The users name, project name and date are included on the certificate. (Note the project name is set in the variable projectTitle)
- OscarFCAperaltaCommunity Member
Hi everybody
Can anybody help me to understand how to create the index.html file? What do i need to do?
I´m trying to replicate the example to my project.
I would appreciate your help :)
- KateMackenzieCommunity Member
Hi Oscar - I am going to try and work that out too and will let you know how I get on!
- KateMackenzieCommunity Member
I found this which I am hoping will be helpful!
https://www.rabbitoreg.com/2018/08/16/articulate-storyline-to-create-a-customized-pdf-on-the-fly/