it-roy-ru.com

Отключить параметры печати браузера (верхние и нижние колонтитулы, поля) со страницы?

Я видел, как этот вопрос задавался несколькими различными способами на SO и некоторых других веб-сайтах, но большинство из них либо слишком конкретны, либо устарели. Я надеюсь, что кто-то может дать здесь окончательный ответ, не потворствуя спекуляциям.

Есть ли способ, с помощью CSS или javascript, изменить настройки принтера по умолчанию, когда кто-то печатает в своем браузере? И, конечно же, под «печатью из браузера» я подразумеваю некоторую форму HTML, а не PDF или какой-либо другой зависимый от плагина mime-тип.

Пожалуйста, обратите внимание:

Если некоторые браузеры предлагают это, а другие нет (или если вы знаете, как это сделать только для некоторых браузеров), я приветствую решения для конкретных браузеров.

Точно так же, если вы знаете, что основной браузер имеет определенные ограничения, запрещающие НИКОГДА делать это, это также полезно, но некоторые весьма актуальные документы будут приветствоваться. (просто сказать «что идет вразрез с политикой безопасности XYZ» не очень убедительно, когда XYZ внес существенные изменения в указанную политику за последние три года).

Наконец, когда я говорю «изменить настройки печати по умолчанию», я не имею в виду вечность, просто для своей страницы, и я имею в виду конкретно поля печати, верхние и нижние колонтитулы.

Мне очень хорошо известно, что CSS предлагает возможность изменения ориентации страницы, а также полей страницы. Одна из многих проблем - с Firefox. Если я установлю поля страницы на 1 дюйм, он ДОБАВЛЯЕТ это к половине дюйма, которую он уже установил на место.

Я очень хочу сократить использование PDF-файлов на сайте моего клиента, но основной причиной для беспокойства является нарушение представления (а также отсутствие достоверности).

166
Anthony

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

Недостатком является то, что поведение в разных браузерах не согласовано. Safari по-прежнему не поддерживает настройку полей страницы принтера, но все другие основные браузеры теперь поддерживают его.

С помощью директивы @page вы можете указать поле принтера на странице (которое отличается от обычного поля CSS элемента 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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

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

Это не работает в Firefox 3.6, IE 7, Safari 5.1.7 или Google Chrome 4.1.

Установка поля @page действует в IE 8, Opera 10, Google Chrome 21 и Firefox 19.
Несмотря на то, что поля страниц установлены правильно для вашего контента в этих браузерах, поведение не является идеальным при попытке скрыть верхний/нижний колонтитулы. 

Вот как он ведет себя в разных браузерах:

  • В Internet Explorer в настройках этой печати поле фактически установлено равным 0 мм, и если вы сделаете Предварительный просмотр, вы получите 0 мм по умолчанию, но пользователь может изменить его в предварительном просмотре.
    Вы увидите, что содержимое страницы на самом деле позиционировано правильно, но верхний и нижний колонтитулы браузера отображаются с непрозрачным фоном, что эффективно скрывает содержимое страницы в этой позиции. 

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

  • В Opera содержимое страницы скрывает верхний колонтитул при использовании непрозрачного фона в стандартном CSS, а позиция верхнего/нижнего колонтитулов конфликтует с контентом. Неплохо, но выглядит странно, если для поля установлено небольшое значение, которое делает заголовок частично видимым. Также поле страницы не установлено должным образом.

  • В более новых версиях Chrome верхний и нижний колонтитулы браузера скрыты, если поле @page установлено настолько маленьким, что позиция верхнего/нижнего колонтитула конфликтует с контентом. На мой взгляд, именно так и должно себя вести.

Таким образом, вывод заключается в том, что Chrome имеет лучшую реализацию для скрытия верхнего/нижнего колонтитула. 

181
awe

Любая последняя версия Chrome и Opera, а также Firefox 48 alpha 1 и выше

Вы можете установить поле страницы на размер, который слишком мал для содержания текста, чтобы отключить это (заимствование из ответа awe ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

Для версий Firefox до 48 альфа 1

Вы можете добавить атрибут mozNoMarginBoxes к тегу <html>, чтобы предотвратить печать URL-адресов, номеров страниц и других вещей, добавляемых Firefox на поля страницы.

Это работает в Firefox 29 и далее. Вы можете увидеть скриншот разницы здесь , или см. Здесь для живого примера.

Обратите внимание, что атрибут mozDisallowSelectionPrint в этом примере not требуется для удаления текста с полей; см. Что делает атрибут mozdisallowselectionprint в PDF.js?.

Другие браузеры

К сожалению, кажется, что нет способа решить эту проблему в Internet Explorer, поэтому вам придется прибегнуть к PDF или попросить пользователей отключить тексты полей.

То же самое касается Сафари; согласно комментарию @Luiz Perez , самые последние версии Safari (8, 9.1 и 10) все еще не поддерживают @page для подавления текстов полей.

Я ничего не могу найти в Edge, и у меня нет установки Windows 10 для тестирования.

85
user2428118

Как сказал @Awe выше, это решение, которое подтверждено для работы в Chrome !!

Просто убедитесь, что это ВНУТРИ тегов головы:

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

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>
20
Works

У меня есть аналогичный запрос от клиента, который хочет удалить заголовок, номера страниц и нижний колонтитул HTML. В этом случае клиент представляет HTML-страницу, которая может дублироваться как формальный сертификат. Добавленный URL, страница и заголовок не имеют значения и приводят к не очень приятному конечному продукту. В некотором смысле это выглядит просто дешево. 

Media = Print не удалось отключить эти настройки браузера по умолчанию. Единственный обходной путь - попросить пользователя нажать кнопку «Шестерня» и включить/выключить эти элементы. Серьезно, я понятия не имел, что смогу сделать это в течение 20 лет (и мы думаем, что обычный пользователь будет иметь подсказку, чтобы нажать кнопку переключения?).

Если CSS поддерживает Media = Print, он должен поддерживать возможность контролировать весь процесс печати конечного пользователя. Я ценю, что браузеры предоставляют добавленные поля, но почему бы не позволить CSS контролировать общее впечатление от печати - если это то, что нужно. 90% решение может быть 100% с еще тремя полями! Просто: 

#BrowserPrintDefaults{display:none} 

было бы достаточно. 

Опять же, не имеет значения, хочет ли конечный пользователь распечатать его или нет (возможно, ваш клиент очень частный и не хочет, чтобы распечатанные URL-адреса перемещались. Или, возможно, исполнительная группа использует частные сайты для совместной работы?). Рад защищать конечного пользователя, но если кто-то ищет ответ, не отвечайте, говоря, что это право конечного пользователя - показывать или скрывать. Иногда это право клиента оплачивать счета.

16
CAL

Невозможно временно или навсегда изменить настройки принтера, поля или другие настройки браузера с помощью CSS или JavaScript.

Несмотря на то, что это неблагоприятно для вашего подлинного требования, эти ограничения являются причиной, по которой 95% + веб-пользователей поддерживают JavaScript в своих браузерах. ( Статистика браузера )

6
Daniel Vassallo

Попробуйте этот код, у меня работает 100%: 
ДЛЯ Пейзаж:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

ДЛЯ Портрет:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>
5
Iyes boy

Поскольку вы упомянули «в своем браузере» и firefox, если вы используете Internet Explorer, вы можете отключить верхний/нижний колонтитул страницы, временно установив значение в реестре, см. здесь для примера. AFAIK Я не слышал о способе сделать это в других браузерах. Ответы Даниэля и Миккеля, кажется, сталкиваются друг с другом, я думаю, что где-то в реестре может быть похожая настройка для удаления заголовков/нижних колонтитулов или их настройки. Вы проверили это?

Надеюсь, что это помогает и счастливых праздников, С наилучшими пожеланиями, Том.

0
t0mm13b

Это сработало для меня примерно с 1 см поля

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
0
afshin

@page margin: 0mm теперь работает в Firefox 19.0a2 (2012-12-07).

0
thinsoldier

Я решил свою проблему, используя некоторые CSS на веб-странице.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
0
Kabir Hossain