Javascript 使用css仅打印隐藏内容

我正在构建一个web应用程序，当用户单击按钮时需要打印报告。报告中的任何内容在页面上都不可见，只有在用户单击按钮时才会创建该内容。我最初的想法是打开一个新窗口，设置内容，然后在打印后关闭窗口。但是，这不是一个选项，因为用户在kiosk模式下使用的浏览器无法打开新的选项卡/窗口。要求是报告需要打印，而无需从当前页面重定向。只应打印报告本身，不能包含当前页面中的任何内容

我知道这已经在这里贴了好几次了，但我已经看过很多这样的帖子了，这就是我现在的状态

当我点击按钮打印页面时，它会打印一个空白页面。我不知道为什么这不起作用

这是我到目前为止所拥有的

HTML

JavaScript

$(function() {
    $("#print-button").click(function() {
        $.ajax({
            url: "get-report",
            success: function(resp) {
                $("#report").html(resp); // populate the report div with the response from the ajax call
                $("#report").children("*").addClass("printable"); // make all children of the report div printable
                window.print();
                $("#report").html("");
            }
        });
    });

});

---

您可以将可打印内容插入到隐藏的div中，并使用@media print将其取消隐藏

.print{display:none；}
@媒体印刷品{
正文：不（.both）{display:none；}
.print{display:block！重要；}
}

屏幕内容
两种媒体
可打印内容

这就是我要做的。插入到打印块中的所有内容都将是可打印版本，而不是其他版本。我添加了一个示例代码，答案是你在寻找什么还是我遗漏了什么？你的代码和我的代码之间的唯一区别是，我在黑名单中列出了打印时要隐藏的内容，而你是白名单。这个解决方案对我不起作用。我想我不应该说唯一的区别。我的解决方案尝试同时打印

print only

隐藏内容和标记为

printable

的内容。如果这是一个问题，请使用上面更新的代码，您只需添加

printable

和

这两个类即可。
@media print {
    :not(.printable) {
        display: none;
    }

    .print-only {
        display: block;
    }
}

.print-only {
    display: none;
}

$(function() {
    $("#print-button").click(function() {
        $.ajax({
            url: "get-report",
            success: function(resp) {
                $("#report").html(resp); // populate the report div with the response from the ajax call
                $("#report").children("*").addClass("printable"); // make all children of the report div printable
                window.print();
                $("#report").html("");
            }
        });
    });

});