Для начала создадим кнопку, например такую:
|
1 2 3 4 |
<div class="print-button"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 6 2 18 2 18 9"></polyline><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path><rect x="6" y="14" width="12" height="8"></rect></svg> <span>Версия для печати</span> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.print-button { display: inline-flex; align-items: center; border: 3px solid #BFE2FF; border-radius: 22px; padding: 6px 18px; cursor: pointer; transition: box-shadow 0.3s; box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 8px 10px rgba(0,0,0,0.2); margin: 20px; } .print-button svg { fill: none; stroke: #337AB7; stroke-width: 2; width: 30px; height: 30px; } .print-button span { color: #337AB7; font-size: 18px; line-height: 1; font-family: Arial, sans-serif; padding-left: 12px; } .print-button:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } |
Вариант с открытием всплывающего окна
В этом варианте мы создаем новый документ на основе текущего, открываем его в попапе и выдаем на печать.
Для этого смотрим HTML код нашей страницы и определяем элементы, которые нам нужно подать в это окно и далее на печать.
Для данной страницы, это:
- Заголовок с классом
subbanner - Краткое описание темы с классом
entry-summary - Полное описание темы с классом
entry-content - Подвал с копирайтом с ID
footer
Затем вешаем клик на нашу кнопку, по которому передаем эти значения и добавляем статичные данные.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
document.querySelector(".print-button").onclick = function() { let w = window.open('','','left=50,top=50,width=860,height=600,toolbar=0,scrollbars=1,status=0'); // Создаем окно let elem_1 = document.body.querySelectorAll(".subbanner")[0].outerHTML; // Берем заголовок let elem_2 = document.body.querySelectorAll(".entry-summary")[0].outerHTML; // берем краткую часть темы let elem_3 = document.body.querySelectorAll(".entry-content")[0].outerHTML; // берем полную часть темы let elem_4 = document.getElementById("footer").outerHTML; // Берем подвал // Заполняем новый документ, в котором добавляем все необходимые элементы, как статичные (стили, скрипты и т.д.), так и переданные из основного w.document.write('<link href="/css/all-stylesheets.css" rel="stylesheet" type="text/css" />'); w.document.write('<link href="/css/crayon.css" rel="stylesheet" type="text/css" />'); w.document.write(elem_1); w.document.write(elem_2); w.document.write(elem_3); w.document.write(elem_4); w.document.write('<script src="/js/javaup.js"><\/script>'); w.document.write('<script src="/js/javadown.js"><\/script>'); w.document.write('<script src="/js/crayon.min.js"><\/script>'); w.document.write('<link href="/css/awesome.css" rel="stylesheet" type="text/css" />'); w.document.close(); setTimeout(function () { w.print(); }, 500); w.onfocus = function () { setTimeout(function () { w.close(); }, 500); } }; |
А результатом будет это:
Похожим способом можно выдавать на печать несколько разных элементов сайта, например, тарифов, контактов и т.д..
Про это будет позже в другой теме.
Вариант с изменением самого документа
Тут мы будем по клику добавлять к тегу body класс print, включая тем самым версию для печати. Выключаться она будет по нажатию на клавишу Esc
Этот вариант хорош тем, что можно изменить документ не только для печати, но и для сохранения.
Как и в первом смотрим HTML код нашей страницы, но определяем элементы, которые нам нужно убрать (шапка, подвал, боковая панель, рекламные блоки и т.д.) или изменить (ширину центрального блока и т.д.).
Код для этой будет такой:
|
1 2 3 4 5 6 7 8 9 |
document.querySelector(".print-button").onclick = function() { document.body.classList.add("print"); window.print(); }; document.addEventListener('keydown', function(e) { if (e.keyCode === 27) { document.body.classList.remove("print"); } }); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
body.print #header, body.print .sidebar-block, body.print .execphpwidget, body.print .post-thumbnail, body.print .title.margin-top-30, body.print .linehover, body.print .comment-respond, body.print .subbanner2, body.print .post-meta, body.print .artlinks { display: none; } body.print .col-lg-8 { width: 100%; } |
А результат:
Если нет необходимости показывать все это на странице, то просто добавляем нужные стили в свое CSS и включаем печать по кнопке.
|
1 2 3 |
document.querySelector(".print-button").onclick = function() { window.print(); }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@media print { #header, .sidebar-block, .execphpwidget, .post-thumbnail, .title.margin-top-30, .linehover, .comment-respond, .subbanner2, .post-meta, .artlinks { display: none; } .col-lg-8 { width: 100%; } } |
Выглядит так:
По хорошему, в оба варианта стоило добавить изменения для вкладок (чтобы они шли друг под другом), изменить вывод кода (чтобы он был виден полностью) и еще другие мелочи, но я не стал так глубоко углубляться, так как тема является тестовой и для каждого сайта все равно будет уникальной.
Добавить комментарий: