javascript - 是否可以将多个模式中的多个打印按钮绑定(bind)到每个模式中的特定 div？

Question

我正在处理一个包含信息表的 Foundation 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。

<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>