Печать HTML таблицы с помощью JavaScript

Рассмотрим, как вывести HTML таблицу на печать с помощью JavaScript и jQuery

HTML-разметка

<button id="printTable">Печать таблицы</button>

<table id="printMe">
  <style>
    @media print { /* Стили для печати */
      #printMe .hidden { display:none; } /* что не надо печатать */
      #printMe {
        font-size:14px;
        border: 1px solid #987;
        border-collapse: collapse; 
        border-spacing: 0; 
      }
      #printMe td,
      #printMe th {
        border: 1px solid #999;
      }
    }
  </style>
  <tr>
    <th>HTML</th>
    <th>CSS</th>
    <th>JavaScript</th>
  </tr>
  <tr>
    <td>Тэги</td>
    <td>Селекторы</td>
    <td>Функции</td>
  </tr>
</table>

Видим следующее:

  • Кнопка button, при клике на которую будет открываться окно для печати документа
  • Таблица table, которую необходимо распечатать
  • Стили внутри таблицы, которые необходимо применить для печатаемого документа @media print
  • Класс для скрытия элемента .hidden, который мы не хотим выводить на печать

Далее, подключим jQuery

JavaScript

var tableToPrint = document.getElementById("printMe");

function printData(tableToPrint) { 
  Popup( $(tableToPrint).html() ); 
}

function Popup(data) { 
  var mywindow = window.open('', 'printMe', 'height=600, width=1000');
  // стили таблицы

  mywindow.document.write('<link rel="stylesheet" href="styles.css" type="text/css" />');
  mywindow.document.write(tableToPrint.outerHTML);
  mywindow.document.close(); // для IE >= 10 

  mywindow.focus();          // для IE >= 10

  mywindow.print(); 
  mywindow.close(); 
  return true; 
}

$(document).on('click', '#printTable', function() {
  printData();
  return false;
});

С помощью первых двух функций создаём всплывающее окно, в которое помещаем данные необходимые для печати.

Обратите внимание на строку, где добавляем тег link - это необходимо для чтого чтобы наши кастомные стили таблицы были отображены во всплывающем окне. А для печати мы задавали стили в @media print

В последнем блоке кода мы вешаем событие click на нашу кнопку с id printTable

21/09/2019 11:40
admin
21/09/2019 11:40