我怎样才能设置不同的打印介质

Question

我想问一个问题 我知道我可以使用这样的代码：

 <style media='print'>    .printnotdisplay {display:none;}  </style>

要控制打印，如果我想在打印时隐藏某些组件 我的问题是，在不同的打印按钮的情况下，我想隐藏不同的组件进行打印，例如，在div A中，我只会在div A中打印组件，在这种情况下，我该怎么办？
似乎我应该使用不同的id for media ='print'，有人可以帮我提供更多信息吗？ 非常感谢你 最好的问候

Answer 1

您可以在打印特定类.showOnPrint

时为您想要显示的组件提供帮助

的Javascript

document.getElementById("yourPrintButtonId").addEventListener("click", function() {
    document.getElementById("yourPrintComponentId").className += " showOnPrint";
}, false);

Jquery的

$("#yourPrintButtonId").click(function() {
    $("#yourPrintComponentId").addClass("showOnPrint");
});

在CSS隐藏所有没有此课程:not()的所有内容：

<style media="print">
    :not(.showOnPrint) {
        display: none;
    }
</style>

或

<style>
    @media print {
        :not(.showOnPrint) {
            display: none;
        }
    }
</style>