使用JavaScript函數打印時如何打印隱藏的DIV

Question

我有一個javascript打印功能：

    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;
    }

我有以下HTML：

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

以及以下JQuery / Script：

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

問題：當我打印時，我獲得了divMail（DIV）的內容並將其發送給打印功能，問題在於，由於我在divMail中有一個隱藏的DIV，因此不會在打印中顯示。 如何使打印功能顯示隱藏的DIV？

Answer 1

嘗試這個：

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

之后

printWindow.document.write(printContent.innerHTML);

Answer 2

您可以將其指定為可見以在CSS中打印：

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

而且，不要使用適用內聯樣式的.toggle() ，而要使用類。

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

Answer 3

您需要隱藏CSS中的邊框

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

但這會使您的內容接近邊緣，因此我將所有內容都包裹在DIV中，並加上一些填充