Удалите верхний и нижний колонтитулы из window.print ()

109

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

Я также пробовал распечатать таблицу стилей.

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

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

css printing Виралк
источник

7

Эти элементы зависят от настроек браузера пользователя. Я не думаю, что вы сможете удалить их с помощью CSS или JavaScript.

Майкл Берковски

Я думаю, что этот вопрос требует пояснения: пытаетесь ли вы удалить элементы верхнего и нижнего колонтитула HTML-кода, отображаемого на экране, или хотите удалить верхние и нижние колонтитулы, добавленные функцией печати?

AlanObject

149

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

@page { margin: 0; }

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

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

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

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

Диего Нуньес
источник

2

По какой-то причине body { margin: 1.6cm; }для меня игнорировалось правое поле (возможно, потому, что я использовал text-align:right), поэтому вместо этого я создал <div class="container">для своего контента и использовал .container { margin: 1.6cm; }вместо него.

rybo111 03 авг.13,

8

Я пробую это с Chrome 33. Он отлично работает, но будьте осторожны, потому что body { margin: 1.6cm; }- поскольку это поле для всего документа - не будет учитывать вертикальные поля для многостраничных документов, кроме самого первого и последнего. К сожалению, я не могу придумать обходного пути.

pau.moreno

Привет, @Diego, я доволен вашим предложением, и мой нижний колонтитул верхнего колонтитула был удален, но моя страница для печати увеличилась. "body {margin: 1.6cm;}" просто измените 1.6cm на 1.0cm, и все заработает .. :) Удачного кодирования

Vishal Kiri

3

Здесь есть более обширный ответ: stackoverflow.com/questions/1960939/…

jedison

Удаление поля страницы и добавление поля тела создавало для меня пустую страницу. Я изменил поле тела на заполнение, и это сработало.

Андре Гимарайнш Саката

21

Я уверен, что добавление этого кода в ваш файл 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>

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

Рудиас
источник

4

Нет, это не работает. Он устанавливает маржу, вот и все. В верхнем и нижнем колонтитулах по-прежнему отображаются URL-адрес и дата, время

Учащийся

Работает для Chrome и Firefox, но не для IE 11.

Самми,

21

Fire Fox :

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

Пример :

<html moznomarginboxes mozdisallowselectionprint>

l2aelba
источник

6

Это больше не будет работать после выхода Firefox 48 (август 2016 г.): bugzilla.mozilla.org/show_bug.cgi?id=1260480

Aljullu

у меня это не работает, FF 61, но @page {margin: 0; } решение, похоже, работает и в FF.

Kiko

11

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

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

Решение (больше похоже на взлом) заключалось в том, чтобы поставить отрицательный запас на @page.

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

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

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

Ник Панов
источник

8

Стандарт 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>.

Хоссейн Гаем
источник

4

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

Шеак Абдулла
источник

Похоже, это правильный способ сделать это. Даже в моем случае в контексте iframe он отлично работает.

TwystO

2

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

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}

Яситха
источник

11

Это ничего не делает.

ночи

1

@page { margin: 0; }отлично работает в Chrome и Firefox. Я не нашел способа исправить IE через css. Но вы можете войти в Параметры страницы в IE на своем компьютере и установить поля равными 0. Нажмите alt, а затем меню файла в верхнем левом углу, и вы найдете Параметры страницы. Это работает только для одной машины за раз ...

Самми
источник

0

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>

Нихилус
источник

В приведенном выше коде <div id = "header" style = "background-color: White;"> </div> <div id = "footer" style = "background-color: White;"> </div> не являются обязательными. .

Nikhilus

0

Я пытался удалить верхний и нижний колонтитулы html-страницы, которую распечатал вручную.

Никакое решение на этой странице не сработало для меня, я просто определил свой собственный нижний колонтитул, как описано здесь, Firefox не добавлял бы свой собственный верхний и нижний колонтитулы.

К сожалению, это не работает в Chrome.

В CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Добавьте это в свой HTML:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``

Lwinkler
источник

-1

Если вы прокрутите вниз до этого места, я нашел решение для 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>

Иосия
источник

-3

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

Нажмите Alt или F10, чтобы увидеть строку меню.
Щелкните Файл, затем Параметры страницы.
Выберите вкладку Margins & Header / Footers.
Измените URL-адрес на пустой -> изображение

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

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

Алиреза Азами
источник

Хотя эта ссылка может дать ответ на вопрос, лучше включить сюда основные части ответа и предоставить ссылку для справки. Ответы, содержащие только ссылки, могут стать недействительными, если ссылка на страницу изменится. - Из отзыва

SurvivalMachine

спасибо за предложение SurvivalMachine. Я отредактировал свой ответ несколько минут назад :)

alireza azami

Хммм ... Мне не нравится бегать по всем моим пользователям и обновлять их браузеры (сколько бы они ни использовали), чтобы учесть это одно приложение, особенно если они живут на другой стороне планеты. Кроме того, что, если им нужно вернуть настройки для другого приложения? Это не ответ.

Пол

В этом подходе отсутствует кроссбраузерная функциональность, которую может предоставить встроенная в страницу / приложение.

killscreen

Удалите верхний и нижний колонтитулы из window.print ()

Ответы: