Question

我正在通过基础5框架开展一个页面，该框架有一个信息表，每个框架都有一个链接，用于显示包含该特定行的详细信息的特定模式。我对每个模态中包含的div的“打印此信息”按钮感兴趣。我的代码类似于以下内容：

<div id="detailModal1">
   <a href="javascript:window.print()" class="button"></i>Print Modal 1 Info</a>
   <div id="printableInfo1">Modal 1 information here</div>
</div>


<div id="detailModal2">
   <a href="javascript:window.print()" class="button"></i>Print Modal 2 Info</a>
   <div id="printableInfo2">Modal 2 information here</div>
</div>

<div id="detailModal3">
   <a href="javascript:window.print()" class="button"></i>Print Modal 3 Info</a>
   <div id="printableInfo2">Modal 3 information here</div>
</div>

希望这很具体，我感谢任何帮助。谢谢！

Answer 1

您可以使用@media print css查询选择器指定打印页面上应显示的内容。

在下面的例子中，我隐藏打印页面上的所有内容，然后在用户点击按钮时应用课程print-content。

＆＃13;

<script type="text/javascript" src="https://code.jquery.com/jquery-git2.min.js"></script>

<style>
    @media print {
        html body * {
            display: none;
        }
        .print-content {
            display: block !important;
        }
        .print-content * {
            display: block !important;
        }
    }
</style>


<div id="detailModal1">
    <a href="#" class="button print-button"></i>Print Modal 1 Info</a>
    <div id="printableInfo1">Modal 1 information here</div>
</div>
<div id="detailModal2" class="print">
    <a href="#" class="button print-button"></i>Print Modal 2 Info</a>
    <div id="printableInfo2">Modal 2 information here</div>
</div>
<div id="detailModal3">
    <a href="#" class="button print-button"></i>Print Modal 3 Info</a>
    <div id="printableInfo2">Modal 3 information here</div>
</div>

<script>

    $('.print-button').click(function(e) {
        var printContainer = $(e.target).parent();
        printContainer.addClass('print-content')
        window.print()
        printContainer.removeClass('print-content')
    })

</script>

＆＃13;

是否可以将多个模态中的多个打印按钮绑定到每个模态中的特定div？

1 个答案: