Question

我正在尝试在HTML中实现打印功能。我知道我可以用window.print()打印整个页面，但是如何只打印特定的页面元素？例如，特定的<DIV>Some text to print</DIV>。

Answer 1

您可以使用特定于打印的CSS样式表并隐藏除要打印的内容之外的所有内容。

<div class="no-print">I won't print</div><div class="something-else">I will!</div>

只会隐藏no-print类，但会显示带打印类的任何内容。

<style type="text/css" media="print">
   .no-print { display: none; }
</style>

Answer 2

如果您熟悉jQuery，可以使用jQuery Print Element插件，如下所示：

$('SelectorToPrint').printElement();

Answer 3

创建一些通用的东西以用于任何HTML元素

HTMLElement.prototype.printMe = printMe;
function printMe(query){
  var myframe = document.createElement('IFRAME');
  myframe.domain = document.domain;
  myframe.style.position = "absolute";
  myframe.style.top = "-10000px";
  document.body.appendChild(myframe);
  myframe.contentDocument.write(this.innerHTML) ;
  setTimeout(function(){
  myframe.focus();
  myframe.contentWindow.print();
  myframe.parentNode.removeChild(myframe) ;// remove frame
  },3000); // wait for images to load inside iframe
  window.focus();
 }

用法：

document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

希望这有帮助问候
Gaurav Khurana

Answer 4

如果您使用的是JQuery，则可以使用clone执行以下操作：

LocationConstraint

并使用如下： function printElement(e) { var ifr = document.createElement('iframe'); ifr.style='height: 0px; width: 0px; position: absolute' document.body.appendChild(ifr); $(e).clone().appendTo(ifr.contentDocument.body); ifr.contentWindow.print(); ifr.parentElement.removeChild(ifr); }

Answer 5

如果我对您的理解很好，则可以使用CSS3打印所选的HTML元素。

请注意，您只需要一个选择器。这样，您可以使用CSS类轻松打印元素或整个页面。

您可以在此处查看一个有效的示例：https://jsfiddle.net/gengns/d50m8ztu/

Answer 6

简单的html和纯javascript效果最佳。参数“ this”是指当前ID，因此该功能对于所有具有文本内容的ID都是通用的。

html正文：

<div id="monitor" onclick="idElementPrint(this)">text i want to print</div>

纯javascript：

//or: monitor.textContent = "click me to print textual content";

const idElementPrint = (idin) => {
    let ifram = document.createElement("iframe");
    ifram.style = "display:none";
    document.body.appendChild(ifram);
    pri = ifram.contentWindow;
    pri.document.open();
    pri.document.write(idin.textContent);
    pri.document.close();
    pri.focus();
    pri.print();
    }

Answer 7

添加这个方法

function printDiv(divName) {   
        let specific_element = document.getElementById(divName).innerHTML;
        let original_elements = document.body.innerHTML;
    
        document.body.innerHTML = specific_element;
        window.print();
        document.body.innerHTML = original_elements;
    }

Answer 8

如果你需要用纯 JS 打印 HTML 元素，你可以打开一个窗口，只包含你想要打印的元素（没有任何 HTML 标记）。

例如，您可以通过在新窗口中将图像作为文件打开来打印图像本身，而无需将其包装在任何 HTML 中。

注意：“visible=none”实际上并没有使窗口不可见，但它允许将其作为单独的窗口（而不是选项卡）打开。

afterprint 事件允许我们在打印对话框关闭时关闭窗口。 event.target 指向打开的窗口实例。

注意：afterprint必须在调用.print()之前赋值，否则不会被调用。

let win = window.open('/absolute/image/path.jpg', '__blank', 'visible=none');
win.addEventListener('afterprint', event => event.target.close() );
win.print();

Answer 9

使用Print.Js轻松打印HTML或选定HTML 添加Print.Js库

http://printjs.crabbly.com/

  <form method="post" action="#" id="printJS-form">
    ...
  </form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 </button>

Answer 10

最简单的方法是：

elem = document.getElementById('elem').outerHTML

orig = document.documentElement.innerHTML

document.write(elem)
print()

document.documentElement.innerHTML = orig

Answer 11

这是另一个（也许是更现代的？）解决方案：

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

如何只打印选定的HTML元素？

11 个答案: