Печать всего содержимого тега table

384

07 марта 2017, 15:48

Есть кнопка

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

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

Answer 1

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

План таков:

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

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. Убедитесь, что вы не забыли его подключить.

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