Question

我有一个html页面我想要打印这个html页面的一部分，我知道一个javascript函数来打印一个页面，

onClick="javascript:window.print(); return false;

但是如何打印页面的一部分？

如果有人有想法，请与我分享。

Answer 1

您应该为打印介质使用单独的CSS。这允许您在打印页面时隐藏/显示页面的部分。

html：

<div class="dont-print-that">
   blah
</div>
print this!

包括：

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

print.css

.dont-print-that{display:none;}

另一种解决方案是打开一个只包含您要打印的内容的新窗口。您可以在弹出窗口或iframe中执行此操作。我个人认为CSS解决方案更优雅，但这取决于你。

Answer 2

您可以应用CSS样式来隐藏除{1}为media="print"打印的内容之外的所有内容。

您也可以在另一个窗口或[隐藏] <iframe>中加载页面并打印出来。

Answer 3

如果您想在页面上实现多个“打印此部分”功能，那么打印媒体样式表（在其他答案中描述）是前进的方向......

...但将其与alternative stylesheets结合使用，这样您就可以为每个部分切换为一个。

Answer 4

可以使用JavaScript和iframe完成

将容器的innerHTML转储到iFrame中（以及所有特定于打印的CSS
打印iFrame内容。

在JSFiddle中试用

您可以在此处看到代码，但是由于StackOverflow渲染器中可能存在安全限制，因此无法使用。

const printButton = document.getElementById('print-button');

printButton.addEventListener('click', event => {
  // build the new HTML page
  const content = document.getElementById('name-card').innerHTML;
  const printHtml = `<html>
      <head>
          <meta charset="utf-8">
          <title>Name Card</title>
      </head>
      <body>${content}</body>
  </html>`;
      
  // get the iframe
  let iFrame = document.getElementById('print-iframe');
  
  // set the iFrame contents and print
  iFrame.contentDocument.body.innerHTML = printHtml;
  iFrame.focus();
    iFrame.contentWindow.print();
  
});

<h1>Print your name badge</h1>
<div id="name-card" class="card">
  <p>Hello my name is</p>
  <h2>Max Powers</h2>
</div>
<p>You will be required to wear your name badge at all times</p>
<a id="print-button" class="btn btn-primary">Print</a>

<iframe id="print-iframe" width="0" height="0"></iframe>

如何打印HTML页面的一部分？

4 个答案: