Видалити заголовок і колонтитул з window.print ()

109

Я використовую window.print () для друку сторінки, але я отримав заголовок і нижній колонтитул, містить назву сторінки, шлях файлу, номер сторінки та дату. Як їх видалити?

Я також спробував таблицю стилів друку.

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

Будь ласка, допоможіть. Дякую.

css printing

— Віралк
джерело

7

Ці елементи специфічні для налаштувань браузера користувача. Я не думаю, що ви не зможете їх видалити через CSS або JavaScript.

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

Я думаю, що це питання потребує уточнення: чи намагаєтесь ви видалити елементи заголовка та нижнього колонтитула HTML, які відображаються на екрані, чи ви хочете усунути заголовки та колонтитули, додані функцією друку?

— AlanObject

149

У Chrome можна приховати цей автоматичний заголовок / колонтитул за допомогою

@page { margin: 0; }

Оскільки вміст поширюватиметься на межі сторінки, заголовок / колонтитул друку сторінки буде відсутнім. У цьому випадку, звичайно, слід встановити деякі поля / прокладки в елементі тіла, щоб вміст не поширювався до краю сторінки. Оскільки звичайні принтери просто не можуть отримати друк без поля, і це, мабуть, не те, що потрібно, вам слід використовувати щось подібне:

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

Як зазначив у коментарі Мартін , якщо на сторінці є довгий елемент, який прокручується повз одну сторінку (як велика таблиця), поле ігнорується, і друкована версія буде виглядати дивно.

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

— diego nunes
джерело

2

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

— rybo111

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>

Ви можете відвідати це, щоб дізнатися більше про це

— Рудія
джерело

3

Ні. Це не працює. Це встановлення маржі, це все. Він все ще відображає URL-адресу та час дати у верхньому та нижньому колонтитулі

— Learner

Працює для Chrome і Firefox, але не IE 11.

— Саммі

21

Firefox:

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

Приклад:

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
джерело

6

Після виходу Firefox 48 (серпень 2016 року) це більше не працюватиме: bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

це не працює для мене, FF 61, але @page {margin: 0; } рішення, здається, працює і у ФФ.

— Кіко

11

Сьогодні мій колега натрапив на те саме питання.

Оскільки рішення "margin: 0" працює для браузерів на базі хрому, Internet Explorer продовжує друкувати колонтитул, навіть якщо для сторінки сторінок встановлено нуль.

Рішенням (більше хака) було поставити негативний запас на @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. Він буде друкувати вміст із конкретного дива без колонтитулів та заголовків. Ви можете налаштувати за своїм бажанням.

По-перше, завантажте та встановіть цей додаток: 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 id="yourDivToPrint">....</div>

— Йосія
джерело

-3

вам не потрібно писати жоден код. безпосередньо перед тим, як зателефонувати window.print (), вперше змінити налаштування друку браузера. наприклад у firefox:

Натисніть Alt або F10, щоб побачити рядок меню
Клацніть на «Файл», а потім «Налаштування сторінки»
Виберіть вкладку Поля та колонтитули
Змініть URL-адресу для порожнього -> зображення

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

Натисніть Alt або F10, щоб побачити рядок меню
Клацніть на «Файл», а потім «Налаштування сторінки»
у розділі Заголовки та колонтитули Змінення URL-адреси на порожню.

— аліреза азамі
джерело

Хоча це посилання може відповісти на питання, краще включити сюди суттєві частини відповіді та надати посилання для довідки. Відповіді лише на посилання можуть стати недійсними, якщо пов’язана сторінка зміниться. - З огляду

— SurvivalMachine

дякую за пропозицію SurvivalMachine. Я відредагував свою відповідь кілька хвилин тому :)

— alireza azami

Гммм ... Мені не подобається бігати за всіма моїми користувачами та оновлювати їх браузери (скільки б вони не використовували), щоб врахувати цей додаток, особливо якщо вони живуть з іншого боку планети. Крім того, що робити, якщо їм потрібні налаштування для іншого додатка? Це не відповідь.

— Пол

У такому підході бракує функціональності перехресного веб-переглядача, який мав би бути представлений на сторінці / додатку.

— killscreen