Question

请考虑以下代码示例：

<!DOCTYPE html>
<html>
    <head>
        <title>HTML5-Template</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style type="text/css">
            .print_this{
                display: none;
            }

            @media print {
                .print_this {
                    display: block;
                    width: 1024px;
                    height: 768px;
                }
            }
        </style>  
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                setTimeout(function () {
                    var el = document.getElementById("report");
                    el.focus();
                    el.print();
                }, 1500);
            });
        </script>
    </head>
    <body>
        <div id="Container">
            <object class="print_this" id="report" name="report" type="application/pdf" data="Certificate.pdf"></object>
        </div>
    </body>
</html>

我想在窗口中隐藏用户的对象，但是在显示打印对话框时只打印标签的内容......这可能吗？

注意：代码来自互联网上的其他地方，但是我觉得这非常非基于标准？

Answer 1

你走在正确的轨道上。现在，您需要在打印媒体块中定义一个仅限屏幕的类（.screen_only { display: none; }）来隐藏您不想向打印机显示的内容：

.print_this{
    display: none;
}

@media print {
    .print_this {
        display: block;
        width: 1024px;
        height: 768px;
    }
    .screen_only {
        display: none;
    }
}

有关工作示例，请参阅http://fiddle.jshell.net/jhfrench/UdQSX/2/show/。当页面在浏览器中加载时，您将看到“打印时不显示”。现在打印页面，您将看到“仅显示打印机”。

仅打印隐藏对象标签的内容

1 个答案: