Forum Discussion
Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz
Hi Nicky,
It's possible to set a background layer in the document definition. This can contain any content including images.
See bold section below.
Note that images are included as data uri's with images encoded as base64 strings. You could use the converter here to convert your image to a base64 string.
(The dimensions set below are the size in pixels needed to cover the full background of an A4 page).
var docDefinition = {
// Set page size
pageSize: 'A4',
// Set document orientation
pageOrientation: 'landscape',
// Set page margins
pageMargins: [0, 110, 0, 100],
// Define document background
background: [
{
image: 'data:image/jpeg;base64,/9j/4QAY...',
width: 841.89,
height: 595.28
}
],
// Define document header
header: [
{
text: 'Organisation Test\n\n',
fontSize: 30,
alignment: 'center',
margin: [0, 40, 0, 40]
}
],
//doc definition continues here...
};
- RyanLowry9 years agoCommunity Member
I've put together a very quick example with a certificate image I pulled off the web.
http://rlowry.github.io/certificate-background/story.html
Certificate html attached.
- NickyA9 years agoCommunity Member
Awesome! I found this resource but was missing the URI convert step and couldn't figure out how to properly reference the image. Thanks again!
- GregWalters9 years agoCommunity Member
Hi Ryan,
Many thanks for this excellent solution.
I was wondering if you could please share the Storyline file for this certificate?
I can't get the certificate background image to generate.
Kind Regards,
Greg
- ApoorvJain7 years agoCommunity Member
Hello Ryan,
I was trying your certificate.html file but it's not working.
When I click on my download button it shows an empty pdf.
Can you please share the .story file which includes the js code to download pdf.
Thanks
Apoorv
- RyanLowry7 years agoCommunity Member
Hi Apoorv,
The zip file attached to the first post in this thread contains a working .story file.
You could also check the browser console to see if you are getting any error messages when clicking the download button and report back here.
Thanks,
Ryan