用于媒体打印的CSS

Question

Ok, so I have this code: 好的，所以我有以下代码：

HTML: HTML：

<body>
    <div>...</div>
    <table id="printthis">
        <tr>
            <td>...</td>
            ...
            ...
        </tr>
    </table>
    <someOtherElementIdontNeed />
    <div>...</div>
</body>

CSS: CSS：

@media print {
    body *:not(.printable) {
        display: none;
    }
    .printable {
        position: absolute;
        top: 0;
        left: 0;
    }
}

JS: (I have somewhere in the HTML that triggers this(to print)) JS ：（我在HTML的某处触发了此（打印））

jQuery(document).ready(function(){
    jQuery("#print").click(function(event){
        jQuery("#printthis").addClass("printable");
        jQuery("#printthis *").addClass("printable");
        window.print();
    });
});

Basically, I want all the contents of the <table> be printed except everything else that is not inside the tag. 基本上，我希望打印<table>所有内容，除了标记内没有的所有其他内容。 I triggered a jQuery.addClass to distinguish whatever is printable from what is not. 我触发了jQuery.addClass来区分可打印内容和不可打印内容。

JS script seems to be working fine, I checked through chrome dev tool, its being appended. JS脚本似乎运行良好，我通过chrome dev工具检查了该脚本，并附加了它。 My css just don't seem to recognize them. 我的CSS似乎无法识别它们。

Isn't this what's suppose the :not() selector is designed to handle? 这不是:not()选择器旨在处理的吗？ When print is triggered, all I'm getting is a blank page... displaying all elements as none which doesn't exempt those with .printable class 触发打印时，我得到的只是一个空白页...将所有元素显示为none ，这不会豁免那些具有.printable类的元素

Answer 1

see here jsfiddle 看到这里jsfiddle

DO NOT use same ids (#printthis) use classes instead .printthis 不要使用相同的ID（#printthis），请改用.printthis类
you cannot have duplicate id-s only classes. 您不能有重复的id-s only类。 that's why it doesn't work for you but it works only in this example where there is a single #printthis id 这就是为什么它对您不起作用，但仅在此示例中有一个#printthis id的情况下#printthis

ALSO . 还可以 。 be careful not to have an element that you want to print..inside another element that doesn't have the class .printthis 注意不要有要打印的元素。在另一个没有类.printthis

for eg do not use 用于例如不使用

 <div>
    <div class="printthis"> PRINT ME </div>
</div>

after adding the .printable class with JQ to all the elements with .printthis , the code from 将带有JQ的.printable类添加到带有.printthis所有元素中.printthis ，

@media print {
 body *:not(.printable) { display:none }
}

will hide the parent element and so any child of that element won't be visible when you print 将隐藏父元素，因此在打印时该元素的任何子元素将不可见

UPDATED JS CODE 更新的JS代码

 jQuery("#print").click(function(event){
    jQuery(".printthis").addClass("printable");
    jQuery(".printthis *").addClass("printable");
    window.print();
});

UPDATED html : 更新的html：

<body>
<div>DO NOT PRINT</div>
<table class="printthis">
    <tr>
        <td>SHOW</td>
        SHOW
        SHOW
    </tr>
</table>
<div class="printthis">TESTPRINT</div>
<someOtherElementIdontNeed />
<div>DO NOT PRINT</div>
<button id="print"> PRINT</button>
</body>

Css : CSS：

@media print {
body *:not(.printable) {
    display: none;
}
.printable {
    position: absolute;
    top: 0;
    left: 0;
}
}

Answer 2

try 尝试

@media print {
    body *:not(.printable, .printable *) {
    display: none;
    }
    .printable {
        position: absolute;
        top: 0;
        left: 0;
    }
}

用于媒体打印的CSS

问题描述

2 个解决方案

解决方案1
2 2016-07-12 10:35:29

解决方案2
1 2016-07-12 10:34:47

用于媒体打印的CSS

问题描述

2 个解决方案

解决方案1 2 2016-07-12 10:35:29

解决方案2 1 2016-07-12 10:34:47

解决方案1
2 2016-07-12 10:35:29

解决方案2
1 2016-07-12 10:34:47