How to print a Hidden DIV when printing using a JavaScript Function

Question

I have a javascript print function:

    function printDetails() {
        var printContent = document.getElementById('<%= divMail.ClientID %>');

        var windowUrl = 'about:blank';
        var uniqueName = new Date();
        var windowName = 'Print' + uniqueName.getTime();
        var printWindow = window.open(windowUrl, windowName, 'left=500,top=500,width=0,height=0');
        printWindow.document.write(printContent.innerHTML);

        printWindow.document.close();
        printWindow.focus();
        printWindow.print();

        printWindow.close();

        return false;
    }

I have the following HTML:

<div id="divMail" runat="server" >
    <div id="showTopDetailsContent" style="display: none; position:relative;">
        MORE HTML
    </div>
</div>

And the following JQuery/Script:

$('#showTopDetailsContent').toggle(300);

The problem: When I Print I get the Contents of the divMail (DIV) and send them to the Print Function, the problem is that since I have a DIV inside divMail that is Hidden it will not be displayed in the Print. How do I make the Print Function Display that hidden DIV?

Alberto Fecchi · Accepted Answer · 2013-04-22 19:16:14Z

4

try this:

printWindow.document.getElementById('showTopDetailsContent').style.display='block';

after the

printWindow.document.write(printContent.innerHTML);

answered Apr 22, 2013 at 19:16

Alberto Fecchi

3,5161 gold badge20 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

techfoobar · Accepted Answer · 2013-04-22 19:03:15Z

2

You can specify it as visible for printing in CSS:

@media screen {
    #showTopDetailsContent { display: none; }
    #showTopDetailsContent.show { display: block; }
}
@media print {
    #showTopDetailsContent { display: block !important; }
}

And instead of using .toggle() which applies inline styles, use a class.

$('#showTopDetailsContent').toggleClass('show');

answered Apr 22, 2013 at 19:03

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

2 Comments

Eric Bergman Over a year ago

I don't know someone else thumbed down your comment, anyway, it did not work because the print function opens a new window and the @media print is not available there.

techfoobar Over a year ago

@EricBergman - If the CSS block is inside the DIV divMail it will be available in the printWindow as well.

Shawn · Accepted Answer · 2017-09-08 22:12:50Z

0

you need to suppress the border in CSS

/* stop page from printing footer */
@page {
    size: auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}

but that will put your content close to the edge so I'd wrap everything in a DIV with some padding

answered Sep 8, 2017 at 22:12

Shawn

3,1775 gold badges31 silver badges57 bronze badges

Collectives™ on Stack Overflow

How to print a Hidden DIV when printing using a JavaScript Function

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related