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

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

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

Обратите внимание:

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

Аналогичным образом, если вы знаете о распространенном браузере, который имеет конкретные ограничения для EVER, это также полезно, но будет оценена некоторая довольно современная документация. (просто говоря "что идет против политики безопасности XYZ" не очень убедительно, когда XYZ внес значительные изменения в указанную политику за последние три года).

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Так происходит в разных браузерах:

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

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

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

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

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

Ответ 2

Любая последняя версия 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>

Ответ 3

Как уже говорилось @Awe, это решение, которое работает в Chrome !!

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

<head>
<style 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>

Ответ 4

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

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

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

#BrowserPrintDefaults{display:none}

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

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

Ответ 5

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

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

Ответ 6

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

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

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

</style>
</head>

FOR Portait:

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

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

</style>
</head>

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Это сработало для меня с запасом около 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 */
}