Печать 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
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.