How to Print Slides in Articulate Storyline 360 in HTML5

How to Print Slides in Articulate Storyline 360 in HTML5

To print your slides in Articulate Storyline 360, add the following script to a JavaScript trigger:

if (document.location.href.indexOf('html5') < 0) {
GetPlayer().printSlide()
} else {
if(!window.hasPrintStyle){
window.hasPrintStyle = true;
var css = "@media print {div.controls.grid-row.inflexible,div.area-secondary.cs-left.inflexible,header.header-primary.centered-title.extended-height,div.presentation-wrapper:after {display:none !important; visibility:hidden !important;}}";
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
window.print();
}

Note: This only works in HTML5 in the Classic Player. For Flash, use the SWF package described here: https://elearningbrothers.com/printing-slides-articulate-storyline-2/

If the above code doesn’t work for you in the latest update of Storyline, try this instead:

var styles = `@media print {
  body, * { visibility: hidden; }
  html, body { overflow: hidden; transform: translateZ(0); }
  #slide {
    transform: scale(1.3) !important;
  }
  #wrapper {
   transform: scale(1) !important;
  }
  #slide,
  #wrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }
  #frame {
    overflow: visible !important;
  }
  .slide-transition-container {
    overflow: visible !important;
  }
  @page {size: A4 landscape;max-height:99%; max-width:99%}
    .slide-container, .slide-container * {
      visibility: visible !important;
      margin-top: 0px !important;
      margin-left: 0px !important;
    }
    #outline-panel {
      display: none !important;
    }
  }
}`
  var stylesheet = document.createElement('style');
  stylesheet.type = 'text/css';
  stylesheet.innerText = styles;
  document.head.appendChild(stylesheet);
  window.print();

Things to keep in mind when using the code above:

#1 – This code expects that the content will be printed in Landscape mode. This gives you the best & fullest output. If you want to adjust that at all, take a look at

@page {size: A4 landscape;

#2 – Depending on the browser that you’re using, the size of the content may be too big and extend off of the page. I found that this happened in Edge the most often. If you want to adjust that at all, take a look at

#slide {
    transform: scale(1.3) !important;
  }

You will most likely need to change the scale to something smaller like 1.2

Big thanks to Tyler at Articulate for the help on this!