使用CSS打印页面的不同部分

Print different part of a page using CSS

本文关键字：同部 CSS 打印 使用      更新时间：2023-09-26

我在这里有以下示例(简单)HTML文件http://jsfiddle.net/WhupP/2/该页面包括header, left-column, righ-column和footer四个主要区域。此外，它还包括2个@media元素screen和print。

当我打印页面时，@media screen{…} styles只接收调用并打印整个页面。我知道如果我想打印除right-column以外的所有区域，我就把.noprint {display:none;}添加到right-column

我想知道的是，我可以只用CSS打印1或2个区域吗?如果这是不可能的，它需要JS，什么是最小的JS代码来完成这项工作?

例如，当我打印页面(ctrl+p或command+p)时，我只想打印区域2和3。下次我想只打印2，再一次我想只打印4

在执行打印操作之前，您必须使用jQuery为您想要显示的项目设置一个类，例如.visiblePrint并每次切换。

你也可以捕获打印请求，如果你喜欢:http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

一个例子:

    <script type="text/javascript">
        $( document ).ready(function() {
            printMode = 1;
                var beforePrint = function() {
                        (printMode==3) ? printMode = 1 : printMode++;
                        console.log('Functionality to run before printing.');
                };
                var afterPrint = function() {
                    $('div').removeClass('visiblePrint');
                    switch(printMode) {
                        case 1:
                            $('#print1').addClass('visiblePrint');
                            break;
                        case 2:
                            $('#print2').addClass('visiblePrint');
                            break;
                        case 3:
                            $('#print3').addClass('visiblePrint');
                            break;
                    }
                    console.log('Functionality to run after printing');
                };
                if (window.matchMedia) {
                        var mediaQueryList = window.matchMedia('print');
                        mediaQueryList.addListener(function(mql) {
                                if (mql.matches) {
                                        beforePrint();
                                } else {
                                        afterPrint();
                                }
                        });
                }
                $(window).on('beforeprint', beforePrint);
                $(window).on('afterprint', afterPrint);
                /*window.onbeforeprint = beforePrint;
                window.onafterprint = afterPrint;*/

        }());
    </script>
    <style type="text/css" media="print">
        div {
            display:none;
        }
        .visiblePrint {
            display: block;
        }
    </style>
</head>
<body>
    <div id="print1">Messaggio di stampa 1</div>
    <div id="print2">Secondo messaggio di stampa</div>
    <div id="print3">Viva la mamma</div>
</body>

不幸的是，它的不是跨浏览器，在chrome中引发2个事件的时间，在firefox中不引发事件…

相关文章：