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!