迹忆客 专注技术分享

本文将介绍几种从 HTML 页面打印特定内容的方法。

在 HTML 中在@media print 中隐藏带有 display:none 的内容以打印特定内容

当网页打印在纸上时，我们可以使用 CSS 来改变网页的外观。我们可以在 Web 上设置一种 CSS 样式，在打印 Web 内容时设置另一种 CSS 样式。

CSS @media print 规则允许你在打印 HTML 内容时更改其样式。

我们需要 JavaScript 来打印 HTML 内容。window.print() 方法允许你打印当前窗口。

print() 方法打开 Print 对话框，让你选择首选的打印选项。单击按钮后，我们可以调用 window.print() 来打印当前窗口。

使用 @media print，我们可以将不想打印的 HTML 内容的 display 属性设置为 none。尽管 Web 上有这些内容，但这不会在打印选项中显示 HTML 内容。

例如，在 HTML 中，使用 h1 标签创建两个标题。将第一个标题命名为 Need to print this，将第二个标题命名为 Don't need to print this。

将第二个标题的类名命名为 dontPrint。然后创建一个按钮并将其命名为打印。

另外，给这个按钮一个类名 dontPrint。为按钮创建一个 onClick 侦听器，并在单击按钮时调用 window.print() 方法。

在 CSS 部分，在 @media print 内，将名为 dontPrint 的类的显示属性设置为 none。

下面的示例显示，当单击打印按钮时，具有类名称 dontPrint 的标题和按钮不会显示在打印部分。

示例代码：

<h1>
  Need to print this
</h1>
<h1 class="dontPrint">
  Don't need to print this
</h1>
<button onclick="window.print();" class="dontPrint">
  Print
</button>

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

将 id 传递给 onClick 事件侦听器以打印 HTML 中的特定内容

在这种方法中，我们可以创建要打印的特定内容的 id。然后，我们可以借助 onClick 事件侦听器将 id 传递给 JavaScript 函数。

JavaScript 使用 window.print() 方法打印指定的内容。

innerHTML 属性设置或返回元素的 HTML 内容。我们可以使用它与 document.getElementById() 方法一起选择用 JavaScript 打印的内容。

同样，我们可以使用 innerHTML 属性和 document.body 属性来保留 HTML 文档的原始内容。打印完内容后，我们可以在 document.body.innerHTML 属性中设置 HTML 文档的原始内容。

让我们看看下面的说明以更清楚地理解它。

例如，创建一个 div 并给它一个 id printIt。在那个 div 中，创建一个 h1 标签并在里面写下 Need to print this。

在 div 之外，创建一个 button 并将其命名为 Print。为按钮创建一个 onclick 侦听器，并以 printIt id 作为参数调用 printOut 函数。

在 JavaScript 部分中，使用参数 divId 创建一个名为 printOut 的函数。创建一个名为 printOutContent 的变量来存储 divId 的 innerHTML。

接下来，创建另一个变量 originalContent 来存储 HTML 正文的 innerHTMl。演示如下所示。

 var printOutContent = document.getElementById(divId).innerHTML;
 var originalContent = document.body.innerHTML;

接下来，将正文的 innerHTML 设置为 printOutContent 变量。

然后，调用 window.print() 方法。调用该方法后，将主体的 innerHTML 设置为 originalContent 变量。

document.body.innerHTML = printOutContent;
window.print();
document.body.innerHTML = originalContent;

在这里，当我们调用 window.print() 方法时，它只会打印 divId id 的部分，因为 document.body.innerHTML 仅包含要打印的元素。打印内容后，整个 HTML 文档的内容将设置为其原始状态。

因此，我们使用 JavaScript 打印出 HTML 文档的特定内容。

示例代码：

<div id="printIt">
  <h1>
    Need to Print this
  </h1>
</div>
<button onClick="printOut('printIt')">
  Print
</button>

function printOut(divId) {
  var printOutContent = document.getElementById(divId).innerHTML;
  var originalContent = document.body.innerHTML;
  document.body.innerHTML = printOutContent;
  window.print();
  document.body.innerHTML = originalContent;
}