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.

Hi everyone. I read the notes on this forum extensively (thank you all!) and have talked to John to work out a bug I was having and LOVE this functionality. I'm including a link to a resource that I made for my team showing how to do this. I'm a senior instructional designer at New York Life and often train my team on different bits and bobs of the technical aspects of the job so I put this little thing together for them and held a short training session. 

I'll put a link to download the .story and the PDF file in the comments on Review. 

https://360.articulate.com/review/content/3b3e97ba-fa9a-4dcd-a378-aba59cde4898/review

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?

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....

Hi John,

That sounds amazing. Can you show how you set up the example or provide the source file? I'm looking for the exact functionality that you are showing here!

Thanks!

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();

 

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.