一个 HTML 页面上的多个打印按钮，只打印某些部分？答案

【问题标题】：Multiple Print buttons on one HTML page, only printing certain sections?一个 HTML 页面上的多个打印按钮，只打印某些部分？
【发布时间】：2021-07-20 21:55:42
【问题描述】：

我正在创建一个包含多个磁贴的页面，每个磁贴都有自己的打印按钮。单击打印按钮后，我只想显示要打印的磁贴中的内容。

I'm using @media print display:none any contents that are not in the tiles (which works), but the issue I'm having is each tile displays when a print button is selected.

是否可以使用多个@media 打印或隔离它们？如果不是，如何在@media print 中指示仅包含一个图块，基于哪个图块被单击打印？下面最终打印所有图块。

例子：

    @media print
    {
    .noprint {display:none;}
    }

   <div class="noprint">
      OTHER STUFF
   </div>

   <div class="printcard1" id=BM">
      <a href="javascript:window.print()">PrintMe!</a>
      -CONTENT-
   </div>

   <div class="printcard2" id=KM">
      <a href="javascript:window.print()">PrintMe!</a>
      -CONTENT-
   </div>

等等等等

【问题讨论】：

标签： html css printing media-queries

【解决方案1】：

我终于能够在同一页面上找到多个打印按钮的解决方案。想要分享以防其他人也在搜索中。

<script>
    function printDiv1() {
        var divContents = document.getElementById("Tile1").innerHTML;
        var a = window.open('', '', 'height=500, width=500');
        a.document.write('<html>');
        a.document.write('<body>');
        a.document.write(divContents);
        a.document.write('</body></html>');
        a.document.close();
        a.print();
    }

    function printDiv2() {
        var divContents = document.getElementById("Tile2").innerHTML;
        var a = window.open('', '', 'height=500, width=500');
        a.document.write('<html>');
        a.document.write('<body>');
        a.document.write(divContents);
        a.document.write('</body></html>');
        a.document.close();
        a.print();
    }  

</script>



<div class="PrintRec1" id="Tile1">
  CONTENTS
    <input type="button" value="Print this Recipe" onclick="printDiv1()">
</div>

<div class="PrintRec2" id="Tile2">
  CONTENTS
    <input type="button" value="Print this Recipe" onclick="printDiv2()">
</div>

【讨论】：