打印隐藏div的内容

Question

打印隐藏div的内容

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

已经在stackoverflow中研究了一些讨论它的主题,但它正在谈论相反的,即不打印隐藏DIV的内容.

Answer 1

您可以使用CSS媒体查询来执行此操作而无需使用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>

Run Code Online (Sandbox Code Playgroud)

(我只是为了简洁而格式化了CSS.)

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

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

Answer 2

Dev*_*vin 2

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

Example HTML:

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

Run Code Online (Sandbox Code Playgroud)

CSS

#hidden_div{display: none;}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	11 年，2 月前
查看次数：	13674 次
最近记录：	11 年，2 月前