javascript - 通过 jquery 打印隐藏数据

Question

我有以下代码，我想在其中隐藏详细代码，并且只在打印期间显示:

<div>
    <ul>
        <li>
            <span style="font-size: 1.25em;">
                <strong>#dateformat(startdate, "mm-dd-yyyy")# - #dateformat(enddate, "mm-dd-yyyy")#</strong>
            </span><br/><br/>
            #fullLeft(stripHTML(details),30)#
            </div>
            <div style="display:none;" class="completedata" align="left">
                #details#
            </div>
        <li>
    </ul>
</div>

$(window).load(function() {
    $('li').each(function () {
        $(this).css({
            "page-break-after": "always"
        });
        $(".completedata").css('display','block');
        window.print();
    });
});

它显示带有隐藏显示数据的加载打印代码，但是当我取消打印命令时，它保持隐藏的 div 显示为 block 并且也在显示屏中显示。

Answer 1

正确的做法是使用@media print:

.completedata { display: none; }    
@media print 
{
    .completedata { display: block !important; }
}

$("button").on("click", function() {
  window.print();
});

.completedata {
  color: #e74c3c;
}
.completedata {
  display: none;
}
@media print {
  .completedata {
    display: block !important;
  }
  button { display: none; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda impedit sapiente atque quas aliquam a voluptate obcaecati saepe incidunt itaque eligendi sequi optio delectus similique laborum unde sint consectetur magnam?</p>

<p class="completedata">I appear only when printing the page!</p>

<button>Print me</button>