😎 » JavaScript » Примеры JavaScript » Как сделать страницу для печати в отдельном окне?
106 0  

Как сделать страницу для печати в отдельном окне?

Зачем печатать всю страницу целиком - если можно очень просто указать браузеру что нужно печатать и какие стили задать для печатной версии.

Вся магия будет происходить по нажатию на кнопку:

<button class="print-button">Печать</button>

1. Вариант.

Просто через стили скрыть ненужные блоки и оставить на всю ширину блоки с текстом.

<script>
document.querySelector(".print-button").onclick = function() {
    window.print();
};
</script>
<style>
@media print {
            .kt-1, .kt-3, .banernadhd, header, #dle-comments-form, .nadfootdle, footer, .print-button, .nav-newsv2 {display: none;}
            .main, kt-2 {width: 100%;}
        }
</style>


Вариант 2.

am Для садомазахистов можно пойти по пути джедая и полностью контролировать что будет выводится на печать:

Для этого смотрим HTML код нашей страницы и определяем элементы, которые нам нужно подать в это окно и далее на печать.

Например:

  • Заголовок с классом subbanner
  • Краткое описание темы с классом entry-summary
  • Полное описание темы с классом entry-content
  • Подвал с копирайтом с ID footer

Затем вешаем клик на нашу кнопку, по которому передаем эти значения и добавляем статичные данные.

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); 
    }
};

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023