Question

在我的页面上，我有一个HTML DIV显示在屏幕上，另一个隐藏。我带有我需要打印的报告的隐藏DIV内容，我需要点击它以便用户无法看到它，只能打印。此外，屏幕上显示的DIV的内容，我不想出来打印。 ;）

'已经在stackoverflow中研究了一些讨论它的主题，但它正在讨论相反的情况，即不打印隐藏DIV的内容。

Answer 1

您可以使用CSS media query执行此操作，而无需使用Javascript：

<html>
    <head>
        <title></title>
        <style type="text/css">
            .a {color: green;}
            .b {color: blue;}
            .printMe {display: none;}
            @media print {
                div {display: none;}
                .printMe {display: block;}
            }
        </style>
    </head>
    <body>
        <div class="a">Some text.</div>
        <div class="printMe">Only to be shown in print.</div>
        <div class="b">More characters.</div>
    </body>
</html>

（我为此简化了格式化CSS。）

如果将其加载到浏览器中，则应仅看到彩色文本。如果您进行打印预览，则应仅看到黑色文本。

编辑：您仍然可以使用您希望进行打印的任何其他方法，无论是通过简单的Javascript还是使用浏览器的打印方法的用户。

Answer 2

您可以在发送到打印时简单地切换可见性。

Example HTML:

<div id="printdiv">
    <div id="hidden_div">
        MORE HTML
    </div>
</div>

<强> CSS

#hidden_div{display: none;}

<强> JQuery的

function myPrint() {
        var myPrintContent = document.getElementById('printdiv');
        var myPrintWindow = window.open(windowUrl, windowName, 'left=300,top=100,width=400,height=400');
        myPrintWindow.document.write(myPrintContent.innerHTML);
        myPrintWindow.document.getElementById('hidden_div').style.display='block'
        myPrintWindow.document.close();
        myPrintWindow.focus();
        myPrintWindow.print();
        myPrintWindow.close();    
        return false;
    }

现在使用按钮或链接触发myPrint()，您可以单独打印隐藏的div，而不打印其他div

Answer 3

我建议您查看@print样式表选项。

See this article here too:

打印隐藏div的内容

3 个答案: