Как печатать только выбранный элемент HTML?

Я пытаюсь реализовать функцию печати в HTML. Я знаю, что я могу распечатать всю страницу с помощью window.print(), но как я могу напечатать только определенный элемент страницы? Например, конкретный <DIV>Some text to print</DIV>.

Ответ 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>

Ответ 2

Если вы знакомы с jQuery, вы можете использовать плагин jQuery Print Element следующим образом:

$('SelectorToPrint').printElement();

Ответ 3

Если вы используете JQuery, вы можете использовать clone, чтобы сделать следующее:

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);
}

и используйте так: printElement(document.getElementById('myElementToPrint'))

Ответ 4

Создал что-то общее для использования на любом элементе 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();

Надеюсь, что эта помощь
С уважением
Гаурав Хурана

Ответ 5

Попробуйте следующее:

http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

Надеюсь, что это поможет.

Ответ 6

Распечатать Html или выбранный Html легко, используя Print.Js Добавить Print.Js Library

http://printjs.crabbly.com/

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

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

Ответ 7

Вот другое (возможно, более современное?) решение:

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