Primary Use Cases for Custom PDF Exports
- ✓Training Reflection Summaries
Allow learners to download personal notes or action plans drafted during interactive lessons.
- ✓Open-Ended Survey Records
Capture user feedback and export a permanent copy for offline submission or reference.
- ✓Certificate & Completion Verification
Generate custom progress summaries containing learner names and validated responses.
- ✓Compliance Documentation
Provide downloadable copies of user-submitted regulatory acknowledgments.
Step-by-Step Guide to Exporting PDF Data
-
01
Prepare Your Code File
Create a blank document in a text editor (such as Notepad++ or Brackets) and save it as
data.htmlorcertificate.html. -
02
Define HTML Parameters & PDF Content Structure
Configure your HTML file to define PDF output titles, question label fields, dynamic variable names, and PDF rendering libraries (such as pdfMake or jsPDF). Save the document.
-
03
Insert a Web Object in Storyline
- Open your Articulate Storyline project slide.
- Navigate to the Insert tab on the top ribbon menu.
- Select Web Object.
-
04
Link Your Local HTML Directory
In the Web Object Properties dialog box, enter the folder path housing your
certificate.htmlordata.htmlfile into the Address field, then click OK. -
05
Assign the JavaScript Execution Trigger
Create a button (e.g., "Download PDF") and attach an Execute JavaScript trigger. Add the script below to locate the embedded iframe and trigger the generation script:
// Name of the target HTML file var certFilename = 'certificate.html'; // Collect all iframe elements on the page var iframeElements = document.getElementsByTagName("iframe"); // Iterate through iframe elements to trigger PDF generation for(var i = 0; i < iframeElements.length; i++){ var src = iframeElements[i].getAttribute('src'); if (src && src.indexOf(certFilename) !== -1) { iframeElements[i].contentWindow.generatePDF(); } } -
06
Publish and Execute
Publish the course output (Web or SCORM/xAPI). Launch the lesson via
story.htmlto enter text field responses and trigger your PDF download.
Video Tutorial Walkthrough
Watch the complete demonstration to see variable mapping and Web Object setup in action:
Implementation Reference Guide
| Configuration Phase | Action Item | Target Result |
|---|---|---|
| Variable Mapping | Match Storyline variable names to JavaScript properties. | Ensures learner inputs map directly to designated PDF text lines. |
| Iframe Target | Match certFilename string to the exact Web Object file name. |
Directs the download button trigger to execute within the target window. |
| Output Verification | Test inside published story.html outputs rather than inside preview mode. |
Guarantees local cross-origin browser rules do not block iframe script execution. |
Frequently Asked Questions
Does this JavaScript approach require an active internet connection?
If your embedded Web Object references locally hosted PDF generation libraries (such as pdfMake.min.js), the PDF generates offline without external server requests.
Can I export multi-line text entry fields into the generated PDF?
Yes. Standard multi-line variables in Storyline 360 map directly into JavaScript string arrays, preserving text formatting and line breaks inside the PDF document.
Why does the download trigger fail to execute in Storyline Preview mode?
Articulate Storyline restricts Web Object cross-domain scripting and local file access inside internal Preview mode. Full testing requires running the published output in a standard web browser.