Creating downloadable pdf files in Storyline - an update on earlier methods

Hi

Your reply prompted me to tidy the demo up a bit - same link as above.

https://demo5.profilelearning.com

I am more than happy to explain how this is done - and share the Storyline file for this demo. But I would ask a favour in return - we have set up a new LinkedIn company page and will be publishing articles there on all things learning technology - it's new and needs followers!!

https://www.linkedin.com/company/profilelearning/

OK - so the heart of the JavaScript works this way:

Firstly it retrieves the Storyline variables it requires 

//Retrieve Player Variables
var player = GetPlayer();
learnerName = player.GetVar("Name");
learnerTitle = player.GetVar("Title");
learnerNotes = player.GetVar("Notes");

the code then dynamically loads the "pdf-lib" JavaScript library using an import() construction. This is part of 'modern JavaScript' and can only be used to load ES format or UMD format modules. By doing it this way you load the library only when the code is executed - you don't need to edit the story,html file to include a "src =" statement...

NOTE: I am loading the library from the on-line code repository unpkg.com and, by default I load the latest version. In a production environment it is always safer to load a specific version in case changes to the latest version messes your code up!

This bit inside the fillForm function uses the pdf-lib code to define a new pdf document instance PDFDocument and then uses a fetch command to read the pdf template file 'NotesTemplate.pdf' into a buffer array - i.e. it just reads it as a set of binary bytes. It then uses the pdf-lib 'load' method to create a pdf document pdfDoc and then the .getform method to read the pdf form data (fields etc.) from this pdf into a form called 'form'

//Read pdf form
  const { PDFDocument } = PDFLib;
  const formUrl = 'NotesTemplate.pdf';
  const formPdfBytes = await fetch(formUrl).then (res => res.arrayBuffer());
  const pdfDoc = await PDFDocument.load(formPdfBytes);
  const form = pdfDoc.getForm();

NOTE: the pdf template 'NotesTemplate.pdf' in this code is read from the root directory - so you will have to copy it to the root (where the story.html file is) after you have published the course - you could put it on a server with public access to the file...

Now you can create variables for each fieldname you want to fill in within the form (you need to know what fieldnames you have created in the pdf form template - in this case LName, LTitle and LNotes)

//Get field names
  const nameField = form.getTextField('LName');
  const titleField = form.getTextField('LTitle');
  const notesField = form.getTextField('LNotes');

You can then write your variables into the the newly created pdf form:

//Fill in form
  nameField.setText(learnerName);
  titleField.setText(learnerTitle);
  notesField.setText(learnerNotes);

The rest of the code converts the form back to a byte array and then uses another JavaScript library 'tiny-save-as' which is, again called dynamically. The file is output as a binary 'blob'.

I've attached the story file and the NotesTemplate.pdf form file. Just publish to the web - copy the pdf template into the root folder and it should work.

NOTE: you can modify the pdf template and add all sorts of stuff in it without changing your JavaScript code - as long as you don't change the field names. And, yes, it could be a multi-page document.

I know this looks daunting if your JavaScript is not so good - but, trust me, it is a lot easier than the previous methods I have used for multi-page pdf's.

This is big news and a welcome addition.  It would be wonderful if SL could incorporate this into upcoming versions. 

I take it, there is no way to publish this in Review correct?

My project needs to be launched in a SCORM package on an LMS.  Are there any issues with launching that way? assuming you add the NotesTemplate.pdf to the root of the zip?

When you go to publish to review there's an option for "Publish locally for manual upload". That'll generate a zip file that you can add the PDF template to and then in Review you can upload the file using the option at the top left of the page.

Worked perfectly for me and has made creating PDF's so much easier!

You are a hero among heroes!

How do you go about formatting the PDF to add more fields?

(Yes, I liked your LinkedIn Page!)

Hi Rob

Glad you liked this demo. Thanks for viewing the LinkedIn page.

Adding new fields to the PDF and JavaScript is pretty simple. Just start with the NotesTemplate.pdf - open it with Adobe Acrobat (there are probably other pdf form editors but I only use Acrobat). Then select the "Prepare Form" option. You can now resize the boxes - edit the text - add new fields and even add additional pages if you wish. (see screenshot attached)

When you add new fields you will need to give them a name - make a note of the fields you add. e.g newtemplateField

Now add the text entry or variables you need to capture in Storyline - again note the field names. e.g newstoryField

Then edit the JavaScript - very simple...

var player = GetPlayer();
learnerName = player.GetVar("Name");
learnerTitle = player.GetVar("Title");
learnerNotes = player.GetVar("Notes");

newJSField = player.GetVar("newstoryField");

This grabs your new Storyline variable from Storyline and puts it in a JavaScript variable...

Then add the pdf template fields you have added to this section of code that gets the field names from the pdf template:

//Get field names
  const nameField = form.getTextField('LName');
  const titleField = form.getTextField('LTitle');
  const notesField = form.getTextField('LNotes');

  const newField = form.getTextField('newtemplateField');

Then just add you new variable when you fill the form out:

//Fill in form
  nameField.setText(learnerName);
  titleField.setText(learnerTitle);
  notesField.setText(learnerNotes);

  newField.setText(newJSField);

Simple! If I've got that right - I always need to check which is the pdf field name, which is the Storyline field name, which is the JS variable I'm using to store the Storyline variable and which is the JS variable I'm using to point to the field in the template.... But once you have your head around that it's simple :)

Hi,

I have followed the steps above but am getting an issue with CORS with it trying to gain access to the local file - No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Would this be fixed by hosting the file on a cloud storage system or is there something else that I'm missing?

Thanks

Hi lestyn

Sorry not to reply earlier.

Yes. I should have made the point that the Storyline example I loaded "NoteTaker.story" doesn't work if you compile it as a web app and then run it on your 'local' device. The problem is precisely as you describe - you get a CORS error.

It's a little ironic really that you cannot access a local data file from JavaScript because of a cross origin resource sharing error (unless that file is being served by a web server on the same system)... Basically it is a security issue. The browser executes the JavaScript and sends an 'Origin Header' with any 'fetch' or HTTP request. If the server's response doesn't include the appropriate CORS header, the browser will not allow the request and throws the CORS error you saw.

If you think about - it would be a little unsafe if I could just execute JavaScript code to access any data file on the local system!

If you load the Storyline output onto a web page on another server (as per my demo) everything will be fine.

There are services like Ngrok you can use to test your code locally if necessary.

Thank you for sharing this - and helping JavaScript pretenders like me figure it out. I'm not sure if I'm doing something wrong, but on my PDF, the page looks blank initially and I have to click on little "+" signs in the bottom right corner of each field in order to see what's written there (1). Then, when I do open the note area, long notes aren't wrapping (2). I can click into the field and use my arrow keys to scroll across to read the notes, but I can already hear all of our learners screaming that nothing printed out for them.

Any ideas what I'm doing wrong? (Thank you so much!)

are you employed by cluelabs ? 9 posts and 9 times a advertising link to cluelab

Hi Sherri

The problem is in the pdf file template. Sorry, my fault I should have formatted it correctly.

All you need to do is open the pdf template you are using in Adobe Acrobat - select Prepare Form  and right click on the field you want to left justify. Then select Properties and then Options:

You can then click the Multi-line setting - this should left justify the field when it is filled in and allow for text wrapping....

Oh, I should also point out you can adjust the width of the text box - to make the pdf display narrower...

John thanks for posting this, I know we discussed on a previous post, love it.

That works perfectly! Thanks so much for the help on how to edit the form in Adobe, too... I wouldn't have figured that out without your help, either. You're awesome!

Hi John - 

Any idea how to pass a Storyline number variable through to the PDF? I've got your solution working for text fields, but when I try to pass number variables, it seems to break it - or prevent the PDF from printing at all. I searched to see if there's some sort of "form.getNumberField" or ".setNumber", but I'm not finding anything. In my form, I want the number for each color to print in the box, but nothing works unless I comment out those lines - as you can see in my screenshot. (Thanks again for your help!)

I figured it out! You have to convert the numbers to strings, which I learned can be done simply with this code:

var num = 24;
var str = num.toString();

Hi Sherri

You are on a roll! Looking like a real JavaScript professional now... Looking good.

And one last thing! ... for anyone who needs an uneditable PDF...

I didn't want our learners to be able to edit any of the fields (like their scores, etc.) after printing, so I found that I could make the PDF uneditable by "flattening" it. It just takes one line of code right before the code to save the file: 

form.flatten();

Hi Sherri

Nice addition - love it!

Hey all! I've been using this method to create a job log (for installing my company's products), and the last two fields are acting really strangely. I can't figure out why, but those two fields are showing up as empty form fields. When I click on the form field, I can see the entry that I typed... why would it be invisible unless I click on the field? I tried adding the flatten command, but that didn't make the text visible. Thoughts?

Hey all! I've been using this method to create a job log (for installing my company's products), and the last two fields are acting really strangely. I can't figure out why, but those two fields are showing up as empty form fields. When I click on the form field, I can see the entry that I typed... why would it be invisible unless I click on the field? I tried adding the flatten command, but that didn't make the text visible. Thoughts?

Hi Sarah - Just going from your description, it sounds like it could be the same issue that John and I went back and forth on up above in my first couple of comments on this thread - as well as John's answer and explanation. Read through those and see if they help you figure out the problem.

It's not actually the same thing, unfortunately. I've already done that fix because I was also having those plus signs. In this instance, I see the blue form box rather than a blank white space with a plus sign. If I flatten it, I see nothing at all - just white space without a plus. Make sense?

Hmmm... I'm afraid I've reached the end of my expertise, but John or others might have some ideas for you. Most of the solutions I found by reading through examples and ideas here: https://pdf-lib.js.org/

I thought maybe you had reached some sort of maximum fields, but I noticed in one of the help forum comments someone said something about a document with 160 pages, so I doubt you've reached a maximum in your one page.

If you can, you might want to share your source files so others can get a better look at potential solutions for your issue.

Hi Sarah - I'm not sure why the fields are appearing as "invisible" either. Just to clarify, we are talking about the output pdf that is created by your JavaScript code from your pdf form template? And the field you typed in during the Storyline is there - you just can't see it unless you click on it? But what you do see is a blue form entry box? How strange is that??

OK. I would start by looking at your pdf form template. Go to the offending fields and take a look at their 'Properties' (by right ciicking the field):

As you can see, there's quite a lot of options. I would see if there is anything unusual. It sounds to me like the field is set up incorrectly - I mean it's worth checking that it is a 'text field' not some kind of other field - like a 'button field'

But, to be honest, without the files, I'm just taking wild guesses!

Hope that does help though. If you have other fields in the pdf that do work compare the two fields that don't work to them.