Print downloadable PDF certificate (Font style issue)

May 14, 2024

Hi there,

so first have to give credit to Devlin Peck who provided a site on how to create a downloadable PDF certificate with a button and some java code. 

I have it working (but I don't really know code, so alot of copy/paste and getting the jist of it, but i just can't get the font I would like to use for the Name and Date.  It is not picking up my Open Sans font and wondering what I am missing.

Step 1:

I created a "Generate Certificate button" with this code in a storyline file (attached):

var date = new Date();
var dd = String(date.getDate()).padStart(2, '0');
var mm = String(date.getMonth() + 1).padStart(2, '0');
var yyyy = date.getFullYear();
date = mm + '/' + dd + '/' + yyyy;
var player = GetPlayer();
var name = player.GetVar("YourName");
var doc = new jsPDF({
orientation: 'landscape'
})
var img = new Image;
img.onload = function() {
doc.addImage(this, 0, 0, 297, 210);
doc.setFontSize(40);
doc.setTextColor(0, 0, 0);
doc.setFont('OpenSans-Bold-bold', 'bold');
doc.text(name, (doc.internal.pageSize.width / 2), 100, null, null, 'center');
doc.setFont('OpenSans-Regular-normal', 'normal');
doc.setFontSize(15);
doc.text(date, (doc.internal.pageSize.width / 2), 170, null, null, 'center');
doc.save("Certificate.pdf");
};
img.crossOrigin = "";
img.src = "Cert_Alarms_Final.png";

------

Step 2: 

I put the two .js fonts in the published storyline file (I used a converter to get the .ttf file and convert to .js as jsPDF didn't have Open Sans as a default font option.  I copied this to the same location as  the story.html file resides inside the publish file along with my  certificate png file I created.

These are the names of the files that generated:

OpenSans-Bold-bold.js

OpenSans-Regular-normal.js

I created this one (attached) Cert_Alarms_Final.png

I am wondering the code up top where I typed in the name of the font, is it possible I didn't need to put the -bold or -normal, since they are in the code already?, I assumed I had to put the full name of the .js file.

-------

I am the one that typed in the font names based on the fonts I downloaded from google and put in my storyline.html code before the close body tag.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js" integrity="sha384-NaWTHo/8YCBYJ59830LTz/P4aQZK1sS0SneOgAvhsIl3zBu8r9RevNg5lHCHAuQ/" crossorigin="anonymous"></script>
<script src="OpenSans-Bold-bold.js"></script>
<script src="OpenSans-Regular-normal.js"></script>

</body>

-----

and then the last thing I did was in my full module, I added a web object that went to the Generate cert published html file and it works perfectly.

-----

Any thoughts, I am assuming it has to do with the name of the font??

 

Cheers

Teresa

Be the first to reply