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