Удалить верхний и нижний колонтитулы из window.print () - PullRequest
92 голосов
/ 22 ноября 2011

Я использую window.print () для печати страницы, но у меня есть верхний и нижний колонтитулы, содержащие заголовок страницы, путь к файлу, номер страницы и дату. Как их убрать?

Я также пытался печатать таблицу стилей.

#header, #nav, .noprint
{
display: none;
}

Пожалуйста, помогите. Спасибо.

Ответы [ 10 ]

122 голосов
/ 01 марта 2013

В Chrome этот автоматический верхний / нижний колонтитул можно скрыть, используя

@page { margin: 0; }

Поскольку содержимое будет расширяться до пределов страницы, верхний / нижний колонтитулы при печати страницы будут отсутствовать. Конечно, в этом случае вы должны установить некоторые поля / отступы в элементе body, чтобы содержимое не доходило до края страницы. Поскольку обычные принтеры просто не могут печатать без полей и, вероятно, это не то, что вам нужно, вы должны использовать что-то вроде этого:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Как указал Мартин в комментарии, если у страницы есть длинный элемент, который прокручивается на одну страницу дальше (например, большая таблица), поле игнорируется и печатная версия будет выглядеть странно. *

На момент написания этого ответа (май 2013 г.) он работал только на Chrome, сейчас не уверен, больше не нужно было пытаться повторить. Если вам нужна поддержка браузера, который не может работать, вы можете создать PDF-файл на лету и распечатать его (вы можете создать самопечатающийся PDF-файл со встроенным JavaScript), но это очень сложно.

21 голосов
/ 19 февраля 2015

Firefox:

  • Добавить атрибут moznomarginboxes в <html>

Пример:

<html moznomarginboxes mozdisallowselectionprint>
18 голосов
/ 09 июня 2013

Я уверен, что добавление этого кода в ваш CSS-файл решит проблему

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

Вы можете посетить это, чтобы узнать больше об этом

10 голосов
/ 21 июля 2016

Сегодня мой коллега наткнулся на тот же вопрос.

Поскольку решение «margin: 0» работает для браузеров на основе хрома, однако, Internet Explorer продолжает печатать нижний колонтитул, даже если поля @page установлены на ноль.

Решение (больше взлома) состояло в том, чтобы поместить на @ страницу отрицательное поле.

@page {margin:0 -6cm}
html {margin:0 6cm}

Обратите внимание, что отрицательное поле не будет работать для оси Y, только для X

Надеюсь, это поможет.

8 голосов
/ 11 января 2016

Стандарт CSS допускает расширенное форматирование.В CSS есть директива @page, которая разрешает некоторое форматирование, которое применяется только к постраничным носителям (например, к бумаге).Смотри http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
        @page 
        {
            size: auto;   /* auto is the current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

и для Firefox используйте его

В Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (просмотр исходной страницы :: тег HTML).

В вашем коде замените <html> на <html moznomarginboxes mozdisallowselectionprint>.

3 голосов
/ 03 апреля 2017
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
2 голосов
/ 08 февраля 2019

Это будет самое простое решение. Я попробовал большинство решений в интернете, но только это помогло мне.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
0 голосов
/ 29 мая 2017

Если вам доведется пролистать до этой точки, я нашел решение для Firefox.Он будет печатать содержимое из определенного div без нижних и нижних колонтитулов.Вы можете настроить по своему желанию.

Во-первых, скачайте и установите это дополнение: JSPrintSetup .

Во-вторых, напишите эту функцию:

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

В-третьих, в вашем коде, где вы хотите написать код для печати, делайте это (я использовал JQuery. Вы можете использовать обычный javascript):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Очевидно, вам нужна ссылка, чтобы щелкнуть:

<a href="#" id="print">Print my Div</a>

И ваш div для печати:

<div id="yourDivToPrint">....</div>
0 голосов
/ 28 сентября 2016

1. Для Chrome и IE

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
Для FireFox, как сказал l2aelba ,

Добавить атрибут moznomarginboxes в Пример:

<html moznomarginboxes mozdisallowselectionprint>
0 голосов
/ 14 августа 2016

вам не нужно писать код. Непосредственно перед вызовом window.print () в первый раз измените настройки печати вашего браузера. например в Firefox:

  1. Нажмите Alt или F10, чтобы увидеть строку меню
  2. Нажмите Файл, затем Параметры страницы
  3. Выберите вкладку Поля и верхние / нижние колонтитулы
  4. Изменить URL на пустое -> изображение

и еще один пример для IE (я использую IE 11 для предыдущих версий, вы можете увидеть это Запрет Firefox или Internet Explorer от печати URL на каждой странице ):

  1. Нажмите Alt или F10, чтобы увидеть строку меню
  2. Нажмите Файл, затем Параметры страницы
  3. в разделе верхних и нижних колонтитулов Изменить URL-адрес на пустой.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...