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 */
}

但是这会使你的内容接近边缘，所以我用DAD包装所有内容

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

3 个答案: