Need Javascript Help with Printing a Page (fixed height/width)

Yes, it is possible, and you have the right idea, but I suspect your code above isn't optimized for use with Storyline. I'll try to take a look at it for you later this evening.

Dave

Hi Lisa,

If you page consists of just text, I think just window.print(); would work just find, and should adjust to a normal size sheet of paper.

But to use your code, this should do the trick.

var sWidth = screen.width;
console.log("sWidth "+sWidth);
var ComputedStyle = getComputedStyle(document.body);
console.log("CS "+ComputedStyle);
var divW = ComputedStyle.width;
var w = divW.replace(/[^0-9]/g,'');
var wN = Number(w);
console.log("Width "+wN);
if (w > 1000) { 
var styles = `@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(0.75) !important;
}
#wrapper {
transform: scale(0.75) !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);
} else {
var styles = `@media print {
body, * { visibility: hidden; }
html, body { overflow: hidden; transform: translateZ(0); }
#slide {
transform: scale(1.0) !important;
}
#wrapper {
transform: scale(1.0) !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();

Dave

Thank you for looking at this! However, it's still not acting as I had hoped. It's not full screen even in a large browser, probably due to the .75 scale and in a smaller browser it's only 30% of the page. I should have attached the SL slides. Here they are. 

You can see that there is an activity on the previous slide that captures test in a variable then shows it on the next slide. The second slide is the one I'm trying to print. I have the print function/JS occurring on a layer so the instructions and button aren't included. 

Thanks!

OK, I understand. I was kind of pressed for time this evening, I'll see if I can find a better solution for you tomorrow.

Hi Lisa,

The problem with making this work correctly, is I can't get the div size from the correct location in the project. This is because Storyline doesn't assign an ID to that div. 

Looking at your story, I think a better solution would be for you to print your values to a pre-prepared html file, that you populate with your variable values This has been done many times before as people print out certificates. I've done it before, and it worked fine but it has been a long time ago, and the method will need to be updated for HTML5. I can probably work it out for you, but I'll need to attack it at a later time.

Thanks so much for looking at this. Is it easier/better to print to html5 or a PDF? I'll look into this and see if I can figure it out. 

Sorry I haven't been able to get back to this for you Lisa,

What I would do would be create a WebObject to handle the printing. That's basically an HTML web page that you pass the values to, and it can print without the restrictions that you have when printing from Storyline. The WebOject then allows you to import it into Storyline so it becomes part of the project. I had planned to build a starter page for you, but I just ran out of time. I completely apologize.

Dave

Hi Lisa,

I'm sorry that it took me so long to get to this, but I have a solution for you.

I've added a webobject to a layer on slide 2 for you. When that slide is selected, the variables are loaded into the webobject on that layer, and then sent to the printer. (I set some default values in the variables so I wouldn't have to keep typing them.)

The styling in the webobject are set to style the print output to fit onto a standard page. It won't matter what size the window is in the browser.

I'm also including the webobject for you to reference. You can modify this to fit your needs, and re-import it into the project. You will need to unzip the webobject into its own folder to update it.

The layout of the page is in the index.htm file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrintDoc</title>
<script src="js/script.js"></script>
<link rel="stylesheet" href="./css/style.css"/> 
</head>

<body onLoad="init();">
 
 <h2>Compassion</h2>
 <ol>
 <li id="CompassionText1"></li>
 <li id="CompassionText2"></li>
 <li id="CompassionText3"></li>
 </ol>
 <h2>Trust</h2>
 <ol>
 <li id="TrustText1"></li>
 <li id="TrustText2"></li>
 <li id="TrustText3"></li>
 </ol>
 <h2>Success</h2>
 <ol>
 <li id="SuccessText1"></li>
 <li id="SuccessText2"></li>
 <li id="SuccessText3"></li>
 </ol>
 
 <hr />
 <h3>I commit to taking thise steps to help our customers move forward every day:</h3>
 <ol>
 <li id="Text1"></li>
 <li id="Text2"></li>
 <li id="Text3"></li>
 </ol>

</body>
</html>

The Storyline variables are loaded into the page for printing by the javascript located in the script.js file in the js folder.

// JavaScript Document


function init() {

 GetFromSL();
}

function GetFromSL() {
 var player = parent.GetPlayer();
 var CompassionText1 = player.GetVar("CompassionText1");
 var CompassionText2 = player.GetVar("CompassionText2");
 var CompassionText3 = player.GetVar("CompassionText3");
 var TrustText1 = player.GetVar("TrustText1");
 var TrustText2 = player.GetVar("TrustText2");
 var TrustText3 = player.GetVar("TrustText3");
 var SuccessText1 = player.GetVar("SuccessText1");
 var SuccessText2 = player.GetVar("SuccessText2");
 var SuccessText3 = player.GetVar("SuccessText3");
 document.getElementById("CompassionText1").innerHTML = CompassionText1; // get the value from Storyline variable and set it in HTML 
 document.getElementById("CompassionText2").innerHTML = CompassionText2;
 document.getElementById("CompassionText3").innerHTML = CompassionText3; 
 document.getElementById("TrustText1").innerHTML = TrustText1; 
 document.getElementById("TrustText2").innerHTML = TrustText2;
 document.getElementById("TrustText3").innerHTML = TrustText3;
 document.getElementById("SuccessText1").innerHTML = SuccessText1;
 document.getElementById("SuccessText2").innerHTML = SuccessText2;
 document.getElementById("SuccessText3").innerHTML = SuccessText3;
 window.print();
}

 The styling is handled by the css in the style.css file, located in the css folder.

@charset "utf-8";
/* CSS Document */

@media print {
 
 @page {
 size: A4;
 margin: 1in;
 }

 
 p {
 font-size: 12pt;
 }
 
 
}

I hope the accomplishes what you need in your project. You should be able to add whatever additional fields that you need by following what I've already started for you.

Here is an example of the printed output.

You will want to publish this to your LMS, or a server for this to work. You won't be able to see the results when previewing, or running it locally on your PC.

Dave

Thank you so much for taking the time to work on this. It's been a busy week so I haven't yet had the chance to look at it but I'm going to over the weekend. I'll let you know how it goes. Thanks again. 

Also looking for this solution.  My need isn't as complex as I'm looking to print a slide without the need to populate variables. When I attempt to print, the slide size is too small and often pushed off into the left of the page.