如何在点击按钮时打印HTML内容，而不是页面？

javascript html css printing

2022-08-30 04:03:10

我想在用户单击按钮时打印一些 HTML 内容。用户单击该按钮后，将打开浏览器的打印对话框，但不会打印网页。相反，它将打印页面上未显示的其他一些HTML内容。

在问这个问题时，我脑海中几乎没有什么解决方案。但我不确定这些是好主意还是可以做得更好。其中一个解决方案是：我可以将此HTML内容保存在div中，并使其打印，但要屏幕。网页上的所有其他元素都可以用于打印和屏幕。然后调用打印。display:display: nonedisplay: nonedisplay:

有什么更好的主意吗？

答案 1

@media print {
  .noPrint{
    display:none;
  }
}
h1{
  color:#f6f6;
}

<h1>
print me
</h1>
<h1 class="noPrint">
no print
</h1>
<button onclick="window.print();" class="noPrint">
Print Me
</button>

我遇到了另一个优雅的解决方案：

将可打印部件放在具有如下 ID 的 div 中：

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

现在让我们创建一个非常简单的javascript：

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

来源：所以答案

答案 2

这是一个纯css版本

.example-print {
    display: none;
}
@media print {
   .example-screen {
       display: none;
    }
    .example-print {
       display: block;
    }
}

<div class="example-screen">You only see me in the browser</div>

<div class="example-print">You only see me in the print</div>