2

考虑以下代码示例：

<!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>

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

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

4

1 回答 1

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/ 。当页面在浏览器中加载时，您将看到“打印时不显示”。现在打印页面，您将看到“这仅针对打印机显示”。

于 2013-01-03T15:13:59.520 回答