windows.print results in empty page

javascript css printing

16,027

Solution 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.

Solution 2

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.

Solution 3

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>

16,027

Author by

MoritzLost

I'm a web developer by trade and amateur photographer based in Cologne, Germany. I maintain a couple of open source projects, find them at github.com/moritzlost. Photography: mehrlicht.photos Personal website: moritzlost.de E-mail: [email protected]

Updated on June 04, 2022

Comments

MoritzLost about 2 years

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?

MoritzLost over 9 years

Why does it need to return window.print?
MoritzLost over 9 years

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 over 9 years

Ok I tried it out with return and the printouts are still empty
verheesj over 9 years

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 over 9 years

Have you tried it on different browsers as it works fine for me.
MoritzLost over 9 years

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. Could this be the cause of this problem?