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

#jquery #print #table

Есть кнопка 




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

Ответы

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

  
    
  
  
    
Page title
    

      
Id
Name
      
1
Alice
      
2
Bob
      
3
Charlie
    
    

    

      
    
  







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


Ответ 2

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

 


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

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


Вот и всё!