Forum Discussion
Need Javascript Help with Printing a Page (fixed height/width)
Hi there. I need to print a page in a SL 360 course (not a certificate). I found some javascript which has worked great, but there is one issue. The formatting/size of the printed page differs depending on the browser size. When the browser size is smaller (1366x768) it fits on the page perfectly and looks great. When the browser is bigger (I have a 4k monitor) only half of the page is in the printable view.
I know you can change the scale of what is printed and I have played with that, but that doesn't seem to help when the browser is full screen on a larger monitor. I need a way to fix the height/width of the printable view or something similar. Is this possible?
Any help would be greatly appreciated. Here is the javascript I am using:
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();
23 Replies
Hello Julio,
When you just attempt to use the print command, you are restricted to what windows can print based on the current window setup. That is why you are seeing the result that you see. The page laid out for on-screen display, not for printing. The code that I listed above is designed for printing.
Hi Dave. Thanks for taking the time to review my question.
I think your solution is a bit too complex for me to understand. Perhaps with a bit of an explanation on the following points I may be able to replicate it.
Brief explanation of my goal: I’m hoping to create a floorplan map of our library. When users select pertinent accessibility features, it is highlighted on the floor plan. I’d like to provide users with the ability to download a copy of the floorplan (along with the highlighted accessibility features). I’ve added a skeletal working draft in case it helps clarify.
Deciphering your solution:
You’ve created a layer that is hosting a webobject. In your scenario the webobject is importing text via variables (Compassiontext1, 2, 3, Trusttext1, 2, 3, etc), stylization via a CSS file and then it’s sent to the printer.
You mentioned that the layout of the page is located in the index.htm file. Is this the same as the Story.html file that is generated by storyline? Would I need to replicate this as I am not generating a layout, but hoping to push the graphics that are on a slide to print?
You mentioned that the storyline variables are loaded into the page for printing by the javascript located in the script.js file in the js folder. Can I omit this step as I will not be bringing in variables but rather I’m looking to replicate the slide, as is?
You mentioned that Styling is handled by the CSS file located in the css folder (in my CSS folder I find a file named output.min.css). Would I be along the correct path to assume that it’s here where I should be making my modifications? Perhaps by adding the following code?
@media print {
@page {
size: A4;
margin: 1in;
}
Hi Julio,
To work correctly, Storyline slides use a lot of features that can be incompatible with the browsers built in screen print engine. That is why just doing a screen print of the slide typically is very small, and doesn't always display everything. To get a good print, you need a page built specifically for the browser's print capabilities. That is why I used a webobject to hold the printed page.
A Webobject is a complete webpage. It includes the index.html file, and any other supporting files, including the CSS file and the javascript that I mentioned. These files are not the same files that are included with Storyline. This article explains a bit about web objects. When you import a local webobject, these files are imported as part of the webobject.
You would not need to include the javascript code for your project, since you don't need to set any values presented on your page. You would need the index.html page, with a copy of your image that you want to print, and you would need to include the css code, either on the index.html page or as a linked file.
Give me a few minutes, and I will mock something up for you that you might be able to use.
Dave
Hi Julio,
I've mocked up your project for you.
I added a layer to handle the print function to print your map. The new layer contains the webobject required to print the map When you click the button to show the layer, the layer displays. When the webobject shows, it immediately wants to print the image and opens a print dialoge to choose a printer. I've included a PDF output of the printed output. I've also included the index.html file that I created for this project. I included the javascript and CSS needed in the html file:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrintDoc</title>
<style>
@media print {
@page {
size: A4;
margin: 1in;
}
}
img {width: 7in;}
</style>
<script>
function init(){
window.print();
}
</script>
</head>
<body onload="init();">
<img src="FloorPlan.png" />
</body>
</html>I hope this helps your with your project.
Dave
Hi Dave. Unfortunately I can't seem to access our conversation on E-Learning Heroes as the page is not loading (I'm replying to your post via email). I've already notified support. As soon as I'm able to access the post, I'll review your reply. Regardless, thank you for taking the time to assist.
Hi Dave! My turn! lol. I am trying to implement this. I did it a long time ago but now I don't remember exactly how to execute it. I can't add the course here due to restrictions, but my questions are where do I put the CSS and javascript (I see in the html file but where in there?) and then do I need to create another page and include it in the file package?
Hi Kasa,
There are three files in the example above. The .html file, a script.js file and a style.css file. The javascript goes in the script.js file, and the css code goes in the style.css file. Put all three of those file in a folder of their own, then import the folder into your project as a webobject. You should be able to download the completed project from above to see how I did it.
Dave
Hi Dave
I'd like to try this too. How do I create the js and css file.
Thanks
Sandy
Hi Dave, my apologies if this posts twice. I thought this posted and then I didn't see anything appear in the comments. So I got this all implemented except that the text associated with the variable is not carrying over to the webobject. The set up is this.
Total pages in course 39
First entry - page 5
Second entry - pg 28
Print page - page 35
So I am carrying over the variables using the %variablename% to the print page. I've update the index.html page to show:
<h2>GOOD_Personal_Experience_in_the_Candidate_Process</h2>
<ol> <li id="GoodTextEntry"></li></ol>
<h2>Bad_Personal_Experience_in_the_Candidate_Process</h2>
<ol>
<li id="%BadTextEntry1%"></li>
</ol><h2>Reflecting_on_the_5_Questions </h2>
<ol>
<p>What is compelling about working here?<p>
<p>How would you describe what you do? <p>
<p>What is most exciting about your role here?<p>
<p>What is most challenging about working here?<p>
<p>What are Regeneron's values that resonate most with you?<p></ol>
<h3>Answers</h3>
<ol>
<li id="textentry"></li>
</ol>I'm not sure why the variable text isn't carrying over. Ideas?
Hi Kasa,
You can't use the %variable% to print the variable on the HTML page. You have to pass then variable to a new variable on the page using var player = parent.GetPlayer(); and var SLvariablename = player.GetVar("variablename");
then you can print put the contents of your variable into your list element by using:
<script>
document.getElementById("GoodTextEntry").innerHTML = SLvariablename
<script>Dave
Hi Sandy,
You can create the .js and .css file with any text editor. They are just text files, with the .js extension and the .css extension. If you download the .zip file from earlier in this article, you can look at those examples.
Dave
Well Frankly speaking I believe that Articulate should develop a new trigger to give the possibility to print any slide in an appropriate manner.
