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