使用 JavaScript 函数打印时如何打印隐藏的 DIV答案

【问题标题】：How to print a Hidden DIV when printing using a JavaScript Function使用 JavaScript 函数打印时如何打印隐藏的 DIV
【发布时间】：2013-04-22 19:00:48
【问题描述】：

我有一个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？

【问题讨论】：

标签： javascript jquery asp.net function printing

【解决方案1】：

试试这个：

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

之后

printWindow.document.write(printContent.innerHTML);

【讨论】：

谢谢 Alberto，这正是我想要的。

【解决方案2】：

您可以将其指定为可见以在 CSS 中打印：

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

不要使用应用内联样式的.toggle()，而是使用类。

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

【讨论】：

我不知道其他人点赞了您的评论，无论如何，它不起作用，因为打印功能会打开一个新窗口并且@media 打印在那里不可用。
@EricBergman - 如果 CSS 块在 DIV divMail 内，它也将在 printWindow 中可用。

【解决方案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 中

【讨论】：