Question

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

据我所知，这已多次发布在这里，但我已经查看了很多这些帖子，这就是我现在的情况。

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

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

HTML

<html class="printable">
<head>
    <link rel="stylesheet" type="text/css" href="css/print-style.css">
    <script src="js/jquery.js"></script>
    <script src="js/report.js"></script>
</head>
<body class="printable">
    <div>
        <h1>Content that shouldn't print</h1>
        <h2>Content that shouldn't print</h2>
        <h3>Content that shouldn't print</h3>
        <h4>Content that shouldn't print</h4>
    </div>
    <div id="report" class="print-only"></div>
</body>
</html>

CSS

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

    .print-only {
        display: block;
    }
}

.print-only {
    display: none;
}

的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("");
            }
        });
    });

});

Answer 1

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

＆＃13;

.print {display:none;}

@media print {
  body :not(.both) {display:none;}
  .print  {display:block!important;}
}

＆＃13;

<html>
<head></head>
<body>
  <div>
    Screen content
  </div>
  
  <div class="both">Both media</div>
  
  <div class="print">
    Printable content
  </div>  
</body>
</html>

＆＃13;

使用css只打印隐藏的内容

1 个答案: