jquery - How to print a Hidden DIV when printing using a JavaScript Function - Stack Overflow

admin管理员组

文章数量:1307658

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?

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?

• javascript
• jquery
• asp
• function
• printing

Share Improve this question Follow asked Apr 22, 2013 at 19:00 Eric BergmanEric Bergman 1,4431212 gold badges4747 silver badges8686 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

try this:

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

after the

printWindow.document.write(printContent.innerHTML);

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');

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

本文标签： jqueryHow to print a Hidden DIV when printing using a JavaScript FunctionStack Overflow