windows.print results in empty page

Question

So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:

<body>    
<div id="fullpage">

    <div class="section">
    some stuff that should not be printed
    </div>
    <div class="section">
    even more stuff that should not be printed
    </div>

    <div class="section" id="results_page">
        <img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">

        <div class="content_wrapper" id="result_text">
            <h1 id="result_h1">some stuff</h1>
            <h2 id="result_h2">more headlines</h2>
            <p id="result_p1">some text</p>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
        </div>
    </div>
</div>
</body>

And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).

@media print {
*{
    background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
    display:none;
}
div#fullpage #results_page{
    display:block;
}
#result_image,
#result_text {
    float: none;
    margin: 50px;
}
}

The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):

function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}

So, given all of this, what could be causing the empty page my printer spits out?

javaBean007 · Answer 1 · 2019-10-28T14:39:35.417

For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.

My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.

So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)

The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).

All I had to do was add the following CSS print rules:

 .container, .container-fluid {
    width: auto;
    display: block!important;
 }

and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing

So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.

score 1 · Answer 2 · answered Mar 21 '15 at 22:52

1

Here you go:

     function print_stadtarchiv(print_picture) {
         if(!print_picture) $('#result_image').addClass('unprintable');
         return window.print();
     }

It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.

<!DOCTYPE html>
<html>
<body>    
<div id="fullpage">

    <div class="section">
    some stuff that should not be printed
    </div>
    <div class="section">
    even more stuff that should not be printed
    </div>

    <div class="section" id="results_page">
        <img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">

        <div class="content_wrapper" id="result_text">
            <h1 id="result_h1">some stuff</h1>
            <h2 id="result_h2">more headlines</h2>
            <p id="result_p1">some text</p>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
            <button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
        </div>
    </div>
</div>
</body>
</html>

answered Mar 21 '15 at 22:52

verheesj

1,438
2
16
24

Why does it need to return window.print? – MoritzLost Mar 21 '15 at 22:53
Ah i just left the surrounding tags out, but I'm not sooo bad as to forget even that °v° i meant "why would it work if it returns that if it doesnt when it doesnt?" °v° – MoritzLost Mar 21 '15 at 23:32
Ok I tried it out with return and the printouts are still empty – MoritzLost Mar 22 '15 at 00:12
It's good practice to return something rather than nothing. Even if you return void. There no reason not to return the fundamental what the function is responsible for. – verheesj Mar 22 '15 at 11:42
Have you tried it on different browsers as it works fine for me. – verheesj Mar 22 '15 at 11:43
Ok I didn't know that. Yes, I have tried both Chrome and Firefox, the print is printed as intended in neither of which. Maybe I should mention the html page I'm building is a large page built with [fullpage.js](https://github.com/alvarotrigo/fullPage.js). Could this be the cause of this problem? – MoritzLost Mar 22 '15 at 19:22

score 1 · Accepted Answer · edited May 23 '17 at 12:22

1

To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frame approach elaborated in this answer.

edited May 23 '17 at 12:22

Community

1
1

answered Mar 23 '15 at 14:20

MoritzLost

2,611
2
18
32

windows.print results in empty page

3 Answers3