8

Есть кнопка

<a href='#' id='print'><span class='glyphicon glyphicon-print'></span></a>

Подскажите пожалуйста, как сделать чтобы при клике по данной кнопке, начиналась печать всей таблицы тега . Данных может быть сколько угодно, от 10 до 1000. Очень надеюсь на вашу помощь!

2 ответа 2

6

Мой любимый способ напечатать любой элемент, простой, как табуретка.

План таков:

  1. На лету создаём в DOM копию элемента
  2. Вставляем её в специально заготовленную секцию в корне документа
  3. Скрываем всё в корне, кроме неё
  4. Печатаем видимое содержимое окна: window.print()
  5. Восстанавливаем видимость, вычищаем копию

function printById(id) {
  var el = document.getElementById(id);
  if (!el) return;
  var elCopy = el.cloneNode(true);
  // Получаем ранее созданную или создаём впервые секцию для печати
  var printSection = document.getElementById('printSection');
  if (!printSection) {
    printSection = document.createElement("div");
    printSection.id = "printSection";

    document.body.appendChild(printSection);
  }
  //
  printSection.innerHTML = '';
  printSection.appendChild(elCopy);
  // прячем всё кроме printSection
  var children = document.body.children, i, el;
  for (i = 0; i < children.length; ++i) {
    el = children[i];
    el.style._display = el.style.display;
    el.style.display = 'none';
  }
  printSection.style.display = 'block';

  // Печать
  window.print();

  // Восстанавливаем видимость  
  for (i = 0; i < children.length; ++i) {
    el = children[i];
    el.style.display = el.style._display;
    delete el.style._display;
  }
  printSection.style.display = 'none';
  // Очищаем DOM
  printSection.innerHTML = '';
}
table tr:nth-child(even) {
  background-color: silver;
}

@media print {
* {-webkit-print-color-adjust: exact;}
}
<html>
  <head>
    <script src="http://vanilla-js.com/?download"></script>
  </head>
  <body>
    <h3>Page title</h3>
    <table id="userlist" border=1>
      <tr><th>Id</th><th>Name</th></tr>
      <tr><td>1</td><td>Alice</td></tr>
      <tr><td>2</td><td>Bob</td></tr>
      <tr><td>3</td><td>Charlie</td></tr>
    </table>
    <hr/>
    <div>
      <button onclick="printById('userlist')">Print...</button>
    </div>
  </body>
</html>


PS: Вместо jquery был использован vanillaJs. Убедитесь, что вы не забыли его подключить.

4
  • Спасибо, но у меня почему то не работает..
    – Yuriy
    6 мар 2017 в 5:57
  • Сказать "Не работает" значит ничего не сказать. Опишите поведение, наличие ошибок и тд
    – vp_arth
    6 мар 2017 в 6:01
  • Никаких ошибок нет. Библиотеку подключил. Нажимаю на кнопку, и ничего не происходит
    – Yuriy
    6 мар 2017 в 6:04
  • Сниппет работает?
    – vp_arth
    6 мар 2017 в 6:07
2

Нашел простой и рабочий вариант! Главное, не забыть подключить jquery, а дальше все просто.

 <a href='#' id='print' onclick='printData()'><span class='glyphicon glyphicon-print'></span></a>

Вот сама кнопка. Ниже весь код.

function printData()
{
   var divToPrint = document.getElementById("printTable"); //Указываем ID элементадля печати
   newWin = window.open("");
   newWin.document.write(divToPrint.outerHTML);
   newWin.print();
   newWin.close();
}

Вот и всё!

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.