Question

好的，我有这段代码：

HTML：

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

CSS：

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

JS :(我在HTML中的某处触发了这个（打印））

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

基本上，我希望打印<table>的所有内容，除了标签内没有的其他内容。我触发了一个jQuery.addClass，以区分可打印的内容和不可打印的内容。

JS脚本似乎工作正常，我通过chrome dev工具检查，它被追加。我的css似乎没有认出来。

这不是假设:not()选择器设计用来处理的吗？当触发打印时，我得到的只是一个空白页面...将所有元素显示为none，这些元素不会豁免.printable类

的人

Answer 1

请参阅此处jsfiddle

不要使用相同的ID（#printthis）而不是使用类.printthis你不能只有重复的id-s类。这就是为什么它不适合你但它只适用于这个只有#printthis个id

的例子

ALSO 。小心不要有要打印的元素。在另一个没有类.printthis

的元素中

例如，不要使用

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

将带有JQ的.printable类添加到.printthis的所有元素后，来自

的代码

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

将隐藏父元素，因此当您打印时，该元素的任何子元素都不会显示

更新的JS代码

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

更新的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：

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

Answer 2

试

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

css用于媒体打印

2 个答案: