Печать 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

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous">
</script>

<script>
jQuery(function ($) {
    const tableToPrint = document.getElementById('printMe');

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

    function Popup(data) {
        const 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;
    });
});
</script>

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

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

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

27/02/2020 20:06
admin