Forum Discussion
Creating downloadable pdf files in Storyline - an update on earlier methods
๐ณ๐๐พ๐๐พ ๐๐บ๐๐พ ๐ป๐พ๐พ๐ ๐๐บ๐๐ ๐พ๐๐ผ๐พ๐ ๐ ๐พ๐๐ ๐๐๐๐๐ ๐๐๐พ๐ ๐๐๐พ ๐๐พ๐บ๐๐ ๐๐ ๐ผ๐๐พ๐บ๐๐๐๐ ๐๐ฝ๐ฟ ๐ฟ๐๐ ๐พ๐ ๐ป๐ ๐๐๐๐๐ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐ ๐ฟ๐๐๐ ๐๐๐๐๐๐ ๐ฒ๐๐๐๐๐ ๐๐๐พ (๐พ.๐. Saving Storyline Variables to a PDF - Articulate Storyline Discussions - E-Learning Heroes) ๐บ๐๐ฝ ๐จ ๐๐บ๐๐พ ๐๐บ๐ฝ ๐๐พ๐ ๐ ๐ฟ๐๐๐ ๐๐บ๐๐ ๐๐พ๐๐๐พ๐ ๐๐ ๐๐๐๐ ๐๐๐๐พ ๐๐๐พ๐ ๐จ ๐๐บ๐ ๐๐๐๐๐๐บ๐ ๐ ๐ ๐๐๐๐๐๐ ๐๐ ๐ฟ๐๐๐๐๐พ ๐๐ ๐๐๐ ๐ฟ๐๐ ๐๐๐๐พ๐ ๐ฟ.
๐ฌ๐๐๐ ๐๐ฟ ๐๐๐พ ๐บ๐๐๐๐ผ๐ ๐พ๐ (๐ ๐๐๐พ ๐๐๐พ ๐๐๐พ ๐บ๐ป๐๐๐พ) ๐บ๐๐พ ๐ฟ๐บ๐๐๐ ๐ ๐๐ ๐ฝ ๐๐๐ ๐บ๐๐ฝ ๐บ๐ฝ๐๐๐ผ๐บ๐๐พ ๐๐๐๐๐ ๐๐๐พ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐ ๐ผ๐๐ฝ๐พ ๐ ๐๐ป๐๐บ๐๐ "๐๐๐ฏ๐ฝ๐ฟ". ๐ ๐๐๐๐๐ผ๐บ๐ ๐บ๐๐๐๐๐บ๐ผ๐ ๐๐๐๐ ๐ฝ ๐ป๐พ ๐๐ ๐ผ๐บ๐๐๐๐๐พ ๐๐๐๐ ๐ ๐พ๐บ๐๐๐พ๐'๐ ๐๐๐๐๐ ๐๐๐๐๐ ๐๐พ๐๐ ๐พ๐๐๐๐ ๐๐บ๐๐๐บ๐ป๐ ๐พ๐ ๐๐ ๐ฒ๐๐๐๐๐ ๐๐๐พ - ๐บ๐ ๐๐๐พ ๐พ๐๐ฝ ๐๐ฟ ๐๐๐พ ๐ผ๐๐๐๐๐พ ๐๐๐ ๐๐๐ผ๐ ๐๐ฝ๐พ ๐บ ๐ป๐๐๐๐๐ ๐๐๐บ๐ ๐๐๐๐๐๐พ๐๐ ๐๐๐๐พ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐ ๐๐๐๐ผ๐ ๐๐๐๐ ๐ฝ ๐๐๐พ๐ ๐๐พ๐๐๐๐พ๐๐พ ๐๐๐พ ๐ฒ๐๐๐๐๐ ๐๐๐พ ๐๐บ๐๐๐บ๐ป๐ ๐พ๐, ๐๐พ๐บ๐ฝ ๐๐ ๐บ ๐๐๐ ๐๐ ๐๐๐ ๐๐๐บ๐๐พ ๐๐ฟ ๐บ ๐๐ฝ๐ฟ ๐ฟ๐๐ ๐พ ๐๐บ๐๐พ, ๐๐๐๐พ๐๐ ๐๐๐พ ๐๐พ๐๐๐๐๐พ๐ฝ ๐๐พ๐๐ ๐บ๐ ๐๐๐พ ๐บ๐๐๐๐๐๐๐๐บ๐๐พ ๐ ๐บ๐๐ฝ ๐ ๐ผ๐๐๐๐ฝ๐๐๐บ๐๐พ๐ ๐๐ ๐๐๐พ ๐๐บ๐๐พ, ๐บ๐๐ฝ ๐๐๐พ๐ ๐ผ๐บ๐ ๐ ๐บ ๐ฟ๐๐๐ผ๐๐๐๐ ๐๐ "๐๐บ๐๐พ" ๐๐๐พ ๐๐พ๐๐๐ ๐๐บ๐๐ ๐ผ๐๐๐๐ ๐พ๐๐พ๐ฝ ๐๐ฝ๐ฟ.
๐ณ๐๐พ ๐ ๐พ๐บ๐๐๐พ๐ (๐ฝ๐พ๐๐พ๐๐ฝ๐๐๐ ๐๐ ๐๐๐พ๐๐ ๐ป๐๐๐๐๐พ๐) ๐๐๐๐ ๐ฝ ๐ป๐พ ๐๐๐พ๐๐พ๐๐๐พ๐ฝ ๐๐๐๐ ๐บ๐ ๐๐๐๐๐๐ ๐๐ '๐๐บ๐๐พ' ๐๐ '๐ฝ๐๐๐๐ ๐๐บ๐ฝ' ๐๐๐พ ๐ฟ๐๐ ๐พ.
๐ข๐๐พ๐บ๐๐๐๐ ๐๐๐ ๐๐๐๐ ๐พ ๐๐บ๐๐พ ๐๐ฝ๐ฟ'๐ ๐๐บ๐ ๐ผ๐๐๐๐ ๐๐ผ๐บ๐๐พ๐ฝ - ๐ป๐๐ ๐บ๐ ๐๐ ๐๐๐๐๐๐ป๐ ๐พ. ๐จ'๐๐พ ๐๐พ๐๐๐๐๐บ๐ ๐ ๐ ๐ฝ๐๐๐พ ๐๐บ๐๐ ๐๐๐ผ๐ผ๐พ๐๐๐ฟ๐๐ ๐๐๐๐๐พ๐ผ๐๐ ๐๐๐๐๐ ๐๐๐๐ ๐บ๐๐๐๐๐บ๐ผ๐ ๐ฟ๐๐ ๐ฝ๐๐๐๐ ๐๐บ๐ฝ๐๐๐ ๐ผ๐๐๐๐๐พ ๐๐๐๐พ๐, ๐๐๐๐๐พ๐ ๐๐พ๐๐๐ ๐๐ ๐๐ ๐ผ๐พ๐๐๐๐ฟ๐๐ผ๐บ๐๐พ๐.
๐ฆ๐ผ ๐๐ต๐ ๐ฎ๐บ ๐ ๐ป๐ผ๐ ๐ฎ๐ฑ๐๐ผ๐ฐ๐ฎ๐๐ถ๐ป๐ด ๐ฎ ๐ฑ๐ถ๐ณ๐ณ๐ฒ๐ฟ๐ฒ๐ป๐ ๐ฎ๐ฝ๐ฝ๐ฟ๐ผ๐ฎ๐ฐ๐ต?
๐ถ๐พ๐ ๐ , ๐ ๐๐๐พ ๐๐๐พ ๐บ๐๐๐๐ผ๐ ๐พ๐, ๐๐๐ฏ๐ฝ๐ฟ ๐๐ ๐บ ๐ ๐๐ป๐๐บ๐๐ ๐๐๐บ๐ ๐๐บ๐ ๐ป๐พ๐พ๐ ๐บ๐๐๐๐๐ฝ ๐๐๐๐พ ๐๐๐๐พ. ๐จ๐ ๐ฝ๐๐พ๐ ๐บ ๐๐๐๐ฝ ๐๐๐ป ๐บ๐๐ฝ ๐๐๐๐๐๐บ๐๐ฝ๐ ๐๐ฟ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐ ๐๐๐๐๐๐บ๐๐๐พ๐๐ ๐๐พ๐ ๐ ๐๐ ๐๐. ๐จ๐ ๐ผ๐บ๐ ๐ผ๐๐พ๐บ๐๐พ, ๐บ๐๐ฝ ๐๐บ๐๐พ ๐๐ฝ๐ฟ'๐ ๐๐๐๐ ๐ฟ๐๐๐พ. ๐ง๐๐๐พ๐๐พ๐, ๐บ ๐๐๐๐พ ๐๐พ๐ผ๐พ๐๐ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐ ๐ ๐๐ป๐๐บ๐๐ "๐๐ฝ๐ฟ-๐ ๐๐ป" ๐๐บ๐ ๐บ ๐ซ๐ฎ๐ณ ๐๐๐๐พ ๐ฟ๐๐๐ผ๐๐๐๐๐บ๐ ๐๐๐. ๐จ๐ ๐๐บ๐๐๐๐ผ๐๐ ๐บ๐, ๐๐ ๐ผ๐บ๐
๐๐๐ฝ๐๐ฟ๐ ๐พ๐๐๐๐๐๐๐ ๐๐ฝ๐ฟ'๐
๐ผ๐๐พ๐บ๐๐พ, ๐ฟ๐๐ ๐ ๐บ๐๐ฝ ๐ฟ๐ ๐บ๐๐๐พ๐ ๐๐ฝ๐ฟ ๐ฟ๐๐๐๐
๐บ๐ฝ๐ฝ, ๐๐๐๐พ๐๐ ๐บ๐๐ฝ ๐๐พ๐๐๐๐พ ๐๐บ๐๐พ๐ ๐ฟ๐๐๐ ๐บ ๐๐ฝ๐ฟ
...๐บ๐๐ฝ ๐บ ๐๐๐๐ ๐พ ๐ ๐๐ ๐๐๐๐พ.
๐ณ๐๐๐ ๐๐พ๐บ๐๐ ๐๐๐บ๐ ๐๐๐๐๐พ๐บ๐ฝ ๐๐ฟ ๐๐บ๐๐๐ฟ๐๐ ๐ ๐ ๐๐๐๐๐๐๐ ๐๐๐ ๐๐๐พ๐๐พ ๐๐๐ ๐๐พ๐พ๐ฝ ๐๐ ๐๐ ๐บ๐ผ๐พ ๐๐๐พ ๐๐พ๐๐ ๐๐ ๐พ๐บ๐ผ๐ ๐๐บ๐๐พ ๐๐ฟ ๐๐๐พ ๐๐ฝ๐ฟ, ๐๐๐ ๐ผ๐บ๐ ๐๐๐๐๐ ๐ ๐ฝ๐พ๐๐๐๐ ๐บ ๐๐ฝ๐ฟ ๐ฟ๐๐๐, ๐๐บ๐๐พ ๐๐๐พ ๐ฟ๐๐พ๐ ๐ฝ๐ ๐บ๐๐ฝ ๐๐๐พ๐ ๐๐๐พ ๐๐๐พ ๐๐พ๐๐๐๐พ๐๐พ๐ฝ ๐๐บ๐๐๐บ๐ป๐ ๐พ๐ ๐ฟ๐๐๐ ๐ฒ๐๐๐๐๐ ๐๐๐พ ๐๐ '๐ฟ๐๐ ๐ ' ๐๐๐ ๐๐๐พ ๐ฟ๐๐๐.
๐ถ๐พ ๐๐บ๐๐พ ๐ป๐พ๐พ๐ ๐บ๐๐บ๐๐พ ๐๐ฟ ๐๐ฝ๐ฟ-๐ ๐๐ป ๐ฟ๐๐ ๐๐๐๐พ ๐๐๐๐พ ๐ป๐๐ ๐๐พ๐๐พ๐ ๐ฟ๐๐๐๐ฝ ๐๐๐พ ๐๐๐๐พ ๐๐ ๐ฝ๐ ๐บ๐๐๐๐๐๐๐ ๐บ๐ป๐๐๐ ๐๐ (๐๐๐๐๐ ๐๐๐พ ๐๐ ๐ฝ ๐๐๐๐๐๐บ๐๐๐พ๐๐' ๐บ๐ฝ๐บ๐๐พ "๐๐ฟ ๐๐๐๐ ๐ผ๐๐ฝ๐พ ๐๐ ๐๐๐๐๐๐๐ ๐ฝ๐๐'๐ ๐๐๐ ๐บ๐๐ฝ ๐ฟ๐๐ ๐๐"). ๐ฎ๐๐พ๐ ๐๐๐พ ๐ข๐๐๐๐๐๐๐บ๐ ๐ป๐๐พ๐บ๐ ๐๐-๐ป๐พ๐๐๐พ๐พ๐ ๐ผ๐พ๐ ๐พ๐ป๐๐บ๐๐๐๐๐ (๐บ๐๐ฝ ๐๐๐๐ป๐บ๐ป๐ ๐ ๐ฟ๐๐พ๐ ๐พ๐ฝ ๐ป๐ ๐๐๐ ๐๐๐ผ๐ ๐ฟ๐พ๐๐๐๐๐พ ๐๐๐๐๐๐ ๐๐ ๐๐ผ๐ผ๐บ๐๐๐๐๐) ๐๐พ ๐๐พ๐๐พ ๐บ๐ป๐ ๐พ ๐๐ ๐๐พ๐ ๐บ ๐๐พ๐ (๐ป๐๐ ๐๐พ๐๐ ๐ป๐บ๐๐๐ผ) ๐ฝ๐พ๐๐๐๐๐๐๐บ๐๐๐๐ ๐๐๐๐๐๐๐ ๐๐๐๐ผ๐ ๐ผ๐บ๐ ๐ป๐พ ๐๐๐พ๐๐พ๐ฝ ๐๐พ๐๐พ:
https://demo5.profilelearning.com
๐ฎ๐, ๐๐๐๐ ๐๐๐'๐ ๐บ ๐๐พ๐๐ ๐๐๐๐๐พ๐๐๐๐๐พ ๐ฝ๐พ๐๐ - ๐ป๐๐ ๐๐พ ๐บ๐๐พ ๐๐๐๐๐๐๐ ๐๐ ๐๐ - ๐บ๐๐ฝ ๐๐๐ ๐ ๐๐๐ป๐ ๐๐๐ ๐๐๐ ๐๐ ๐๐๐๐พ๐พ ๐๐๐๐พ ๐บ๐๐๐๐ผ๐ ๐พ๐ ๐พ๐๐๐ ๐บ๐๐๐๐๐ ๐บ ๐ป๐๐ ๐๐๐๐พ ๐บ๐ป๐๐๐ ๐๐๐๐ ๐ผ๐๐ฝ๐พ ๐ ๐๐ป๐๐บ๐๐ ๐บ๐๐ฝ ๐บ๐ ๐๐ ๐บ๐ป๐๐๐ '๐๐๐ฝ๐พ๐๐ ๐ฉ๐บ๐๐บ๐ฒ๐ผ๐๐๐๐'
๐๐๐๐ ๐๐ผ ๐๐ต๐ฒ๐ ๐๐ผ๐๐ฟ ๐ฎ๐ฝ๐ฝ๐ฒ๐๐ถ๐๐ฒ ๐ฎ ๐น๐ถ๐๐๐น๐ฒ ๐ณ๐๐ฟ๐๐ต๐ฒ๐ฟ ๐๐ผ ๐ฏ๐ผ๐ผ๐ธ๐บ๐ฎ๐ฟ๐ธ ๐๐ต๐ถ๐ ๐ฝ๐ผ๐๐ - ๐๐ฒ ๐ฎ๐น๐๐ผ ๐ต๐ฎ๐๐ฒ ๐๐ต๐ฒ ๐ฎ๐ฏ๐ผ๐๐ฒ ๐ฑ๐ฒ๐บ๐ผ๐ป๐๐๐ฟ๐ฎ๐๐ถ๐ผ๐ป ๐๐ผ๐ฟ๐ธ๐ถ๐ป๐ด ๐ถ๐ป ๐ฅ๐๐ฆ๐....
90 Replies
I am late to the party, but REALLY want to pull this off. I am working on a Roles and Actions course that will culminate in a "Now go do it!" kind of sheet. I would love for them to be able to download it. I worked the JS into what I needed(Story attached). I have the document(attached as well). I think all of it looks good. I am publishing to a LMS from Storyline and telling it to create a Zip file. I have put my document ALL OVER the zip file to try to make sure it found the document. When I preview it or load it into the LMS and go through it, when I click the button nothing happens.
Now, interesting fact, I loaded your notes demo in the LMS and in preview from Storyline and nothing happens with it either. SO, I am think my code my be good, but it is not finding a file.
I have also changed the URL for the document to our SharePoint site and that does nothing too.
Help me Obi-Won Kenobi!
PS: I added triggers to fill out what you can see on the screen and then I got smart with the things your can't but are on the PDF and added it to the variable default. :)Hi Hunter,
I got my version of this working with the PDF form included in the zip file. But I intend to embed these Storyline "forms" in some Rise courses instead of publishing the standalone Storyline projects, in which case I think the PDF document would need to be hosted externally instead of included in the zip file. Do you know what the URL would look like in the JavaScript if pointing at the file hosted on SharePoint?
Thanks!
Files hosted on SharePoint are typically not served with the correct MIME types or headers needed for direct binary access. Instead, SharePoint often wraps files in a web-based viewer or forces a download experience through a redirect. Direct binary access means that your JavaScript (or browser) can fetch and process a file as raw binary data, not as an HTML-rendered preview or download link, but as a stream of bytes. For example, when you use:
const formPdfBytes = await fetch(formUrl).then(res => res.arrayBuffer()); ...youโre telling the browser to retrieve the raw PDF file so it can be manipulated (e.g., filled with pdf-lib). However, SharePoint typically prevents this by not allowing the browser to access the file as a pure binary stream. This is why SharePoint-hosted PDFs donโt work with libraries like pdf-lib. Itโs not a hosting platform in the traditional sense.I'd upload the PDF file to the Resources section and update the code to:
const formUrl = 'story_content/external_files/notes.pdf';
If this slide is run inside Rise as a Storyline block, it should work without any issues.
Thank you all for your help. With these changes, I got it to work. You guys ROCK!
Replace the following part of the code with the one below. Ensure that const formUrl = ''; exactly matches the name of the PDF file located in the root folder.
var player = GetPlayer(); Role1 = player.GetVar("Role1") ?? ""; Role2 = player.GetVar("Role2") ?? ""; Role3 = player.GetVar("Role3") ?? ""; Role4 = player.GetVar("Role4") ?? ""; Role5 = player.GetVar("Role5") ?? ""; Role6 = player.GetVar("Role6") ?? ""; Role7 = player.GetVar("Role7") ?? ""; Role8 = player.GetVar("Role8") ?? ""; RolePicked1 = player.GetVar("RolePicked1") ?? ""; RolePicked2 = player.GetVar("RolePicked2") ?? ""; RolePicked3 = player.GetVar("RolePicked3") ?? ""; Action1 = player.GetVar("Action1") ?? ""; Action2 = player.GetVar("Action2") ?? ""; Action3 = player.GetVar("Action3") ?? ""; Body = player.GetVar("Body") ?? ""; Mind = player.GetVar("Mind") ?? ""; Spirit = player.GetVar("Spirit") ?? ""; Heart = player.GetVar("Heart") ?? ""; Time1 = player.GetVar("Time1") ?? ""; Time2 = player.GetVar("Time2") ?? ""; Time3 = player.GetVar("Time3") ?? "";What does this part
?? ""
do?
Thank you very much, John!
Just by way of an update. There is now a FREE elearning workshop available on our website that takes you through step-by-step how to create downloadable notes or a learning journal from a Storyline Course. the examples used and full JavaScript code files can be downloaded during the course.
Course Catalogue (profilelearning.com)
You will need to register and you will receive an email for verification purposes but the workshop is free and uninterrupted by advertising!
We will shortly release two further workshops showing how the same task can be accomplished in a RISE course (a) using local browser storage and (b) using SCORM 2004 data storage to hold the text variables required for the journal.
John I applaud you for doing this and offering it for free
Sent from my iPhone
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
@John Cooper, you are a hero for this thread! And all of those who added knowledge and expertise, kudos! This is one of the best threads I've seen on Articulate ELH and I will be coming back over and over until I've mastered it. Perfect timing, I'm creating a course where a customized PDF is a must. Love this community!
Hi Heather
The workshops were a one-off and were specific to creating downloadable notes in RISE using Javascript and local browser storage. They weren't recorded because the workshop usedseveral short video clips demonstrating the key steps in the approach. I am currently converting these into a single asynchronous elearning that covers the whole process and step-by-step instructions, which I will make available on our site.
BUT, if your interest is just to do this in Storyline, I posted details and a short demo of this earlier in this thread. It looks a bit daunting if JavaScript isn't your thing - but it is, actually, fairly simple code.
If you download the sample Storyline file and the pdf template in this post, I would be happy to help go through that example.
The nice thing about this approach is that you, firstly, design your handount as a pdf template inserting fields where you want the learner's input to go - no JavaScript at all involved in that bit! You then just copy the code from the Storyline sample and it should be reasonably simple to work out where your field names need to go.
But, as I say - happy to assist, if I can.
Hello, John! I appreciate that. I'll take a peek and reach out. I truly appreciate you.
Also, I tried to register on your site but it said my verification had failed. Any idea what that's about? Thanks for any insight!
Hi Nedim
I'm glad this discussion was of use. I have also used the same approach and JavaScript library to provide downloadbale notes in RISE. This is done by using Storyline blocks for the text entry and then storing the variables in local browser storage until the end of the course when another Storyline block populates the notes document from the pdf template.
I had a request on another thread to run a workshop on this for RISE developers and there are two FREE on-line workshops running next Tuesday (26th March) which will walk through an example of this. If anyone is interested in attending, send me a message and I can provide a link.
Hello, John! I see the workshops have passed; do you know if there's a recording of the workshop?
Also, is this just a solution for Rise or can it be applied to Storyline 360? Frankly, I have *zero* Javascript experience so this might be out of my league entirely.
Hi Heather,
Feel free to open a case with our support team here if you'd like to request recordings of trainings or webinars that you may have missed. I'll let John help you with the Javascript side of things!
Hi John. I'm interested. Hope I'll get some spare time to attend it.
Hi John, I'm interested in attending!
Thank you for sharing, John! I've been searching for something like this for my client, and it's wonderful to discover that this method, along with this JavaScript library, offers even more possibilities. I've successfully implemented it as a web object triggered by a button click, allowing me to fetch and save the PDF template. This enables me to publish it to Review 360 for my client's review and feedback. Additionally, I've made efforts to avoid duplicating the PDF template to the root directory each time I publish the course. By keeping it within the web object folder, the PDF template remains easily accessible at all times. I just started following your LinkedIn company page.
Jackie, you're a hero for providing this closure! Thank you! :)
The amount of info in this thread is incredible! I've been able to make this work for the most part, but I'm running into a snag when it comes to my PDF. I designed a PDF in Canva and configured the form fields in Adobe Acrobat Pro, but when it comes to generating the PDF using JavaScript in Storyline, nothing happens. I tried altering John's original template PDF with the form fields I was using in my Canva-created PDF, and it works fine; however, that was only with copying the form fields. I then tried to copy all of the content from my Canva-created PDF into John's template PDF, and once again, the PDF isn't generating from Storyline. Anyone have any ideas? I'm thinking it's probably the Canva PDF, but I'm not sure why. I'm not getting any error messages to help diagnose it further.
I figured it out! It was the form fields I created. The form fields had Rich Text Formatting enabled, which prevented the JavaScript from working properly.
