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

Question

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

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

44

javascript html

Источник

user449035 28 июн '11 в 02:33

18 ответов

Решение

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

$('SelectorToPrint').printElement();

14

Источник

user804741 28 июн '11 в 04:07

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

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

11

Источник

user3297388 02 апр '16 в 11:25

Я нашел решение, у которого нет проблем, которые есть у других решений. Он копирует напечатанный элемент в тело и довольно элегантен и универсален:

CSS:

      @media print {
  body *:not(.printable, .printable *) {
    // hide everything but printable elements and their children
    display: none;
  }
}

JS:

      function printElement(e) {
  let cloned = e.cloneNode(true);
  document.body.appendChild(cloned);
  cloned.classList.add("printable");
  window.print();
  document.body.removeChild(cloned);
}

Единственным ограничением является то, что элемент теряет стили, унаследованные от своих предыдущих родителей. Но он работает с произвольными элементами в структуре документа.

7

Источник

user5292374 10 дек '21 в 12:23

Лучше всего работает простой html и чистый javascript. Параметр this относится к текущему идентификатору, поэтому эта функция универсальна для всех идентификаторов с текстовым содержимым.

html body:

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

6

Источник

user9383906 10 ноя '20 в 19:37

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

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

Источник

user3160967 07 июн '17 в 21:45

Если вы используете бутстрап, просто добавьте имя класса d-print-none к элементам, которые вы не хотите отображать в печати.

3

Источник

user8076449 17 авг '21 в 17:37

Если я вас хорошо понял, вы можете использовать CSS3 для печати выбранного HTML-элемента.

@media print {
  body.print-element *:not(.print) {
    display: none;
  }
}

Обратите внимание, что вам просто нужен селектор. Это позволяет легко распечатать элемент или всю страницу с помощью классов CSS.

Здесь вы можете проверить рабочий пример: https://jsfiddle.net/gengns/d50m8ztu/

3

Источник

user5796090 27 май '20 в 14:04

Добавить этот метод

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

2

Источник

user11258866 07 июн '21 в 15:44

Если вам нужно напечатать элемент HTML с помощью чистого JS, вы можете открыть окно, содержащее только элемент, который вы хотите распечатать (без какой-либо 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();

1

Источник

user11988793 05 июл '21 в 19:39

        function printDomElement(element) {
    element.classList.add("printCss");

    let printId = "printSvgId";
    let name = ".printCss";
    let rules = "-webkit-print-color-adjust:exact;height:100%;width:100%;position:fixed;top:0;left:0;margin:0;";

    var style = document.createElement('style');
    style.id = printId;
    style.media = "print";
    document.getElementsByTagName('head')[0].appendChild(style);

    if (!(style.sheet || {}).insertRule)(style.styleSheet || style.sheet).addRule(name, rules);
    else style.sheet.insertRule(name + "{" + rules + "}", 0);

    window.print();

    setTimeout(() => {
      element.classList.remove("printCss");
      let elem = document.getElementById(printId);
      if (elem) elem.remove();
    }, 500);

  }

0

Источник

user8110756 17 авг '22 в 03:25

Самый простой способ сделать это:

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

orig = document.documentElement.innerHTML

document.write(elem)
print()

document.documentElement.innerHTML = orig

0

Источник

user15156241 14 апр '21 в 22:35

Эта реализация создаст и применит специальный временный стиль, который скроет все элементы на печатном носителе, кроме того, который мы хотим напечатать. После печати временный стиль удаляется, и ваш документ возвращается в исходное состояние.

Не стесняйтесь настраивать специальный стиль (например, размер бумаги, поля и т. д.) в соответствии с вашими потребностями.

      
/**
 * @description Print the given element using browser built-in function
 * @param {HTMLElement} element
 */
function printElement(element) {
  if (!element) {
    throw new Error(`Invalid print target element`);
  }

  const printWrapper = "print-wrapper";
  const printElement = "print-element";
  const css = `
  body.${printWrapper} *:not(.${printElement}) {
    visibility:hidden;
  }
  body.${printWrapper} .${printElement} {
    width: 210mm;
    height: 297mm;
    left:0;
    top:0;
    position:fixed;
  }
  body.${printWrapper} .${printElement} * {
    visibility:initial;
    margin: 0;
  }
  `;

  const head = document.getElementsByTagName("head")[0];
  const style = document.createElement("style");

  style.setAttribute("type", "text/css");
  style.setAttribute("media", "print");

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }

  head.appendChild(style);

  document.body.classList.add(printWrapper);
  element.classList.add(printElement);

  window.print();

  document.body.classList.remove(printWrapper);
  element.classList.remove(printElement);

  head.removeChild(style);
}

0

Источник

user327614 20 фев '22 в 19:27

Распечатать Html или Selected 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>

0

Источник

user6935674 11 дек '18 в 12:26

В приведенном ниже примере показано, как вы можете нажать на кнопку, напримерButton 1текст, и появится ТОЛЬКО эта кнопка. Некоторые заметки о моем решении, которое было протестировано на моем Mac, в том числе в браузерах Safari, Firefox, Chrome и Edge:

При нажатии на тег:
- hideAllElemsOnPrintФункция JS:
  все элементы HTML (за исключениемhtmlтег) добавлен класс, который скрывает элементы с помощью тега@media print {...}медиа-запрос в CSS с помощьюdisplay: none;
- onPrintEventsи updateParentElemClassesФункции JS:
  ТОЛЬКО тег, по которому щелкают мышью (и все родительские теги, заключающие в себе этот тег).buttonтег) удалить класс и добавить класс
- Класс НИЧЕГО не делает, но упрощает отладку моего кода и не имеет стилей в CSS.
- exitPrintEventsФункция JS:
  запускается, когда вы видите всплывающее диалоговое окно печати и ПОСЛЕ того, как вы нажимаете на кнопкуCancelилиPrintкнопки в диалоге и.show-printи.hide-printклассы удалены из всех элементов

0

Источник

user1435902 08 ноя '23 в 03:40

Попробуй это:

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

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

0

Источник

user767281 28 июн '11 в 07:48

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

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

-1

Источник

27 янв '17 в 02:24

Установите стиль элемента, который вы хотите напечатать, на position:fixed, затем сделайте так, чтобы он покрывал всю страницу.

-1

Источник

user5772784 01 ноя '22 в 07:29

Другие вопросы по тегам javascript html

user308942 28 июн '11 в 02:34 2011-06-28 02:34 · Accepted Answer · 2011-06-28 02:34

Вы можете использовать специальную таблицу стилей 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>