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

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

173 голосов
/ 25 декабря 2009

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

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

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

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

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

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

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

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

Ответы [ 9 ]

188 голосов
/ 06 мая 2010

Стандарт 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 имеет наилучшую реализацию в отношении сокрытия верхнего / нижнего колонтитула.

85 голосов
/ 21 мая 2014

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

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

Он работает в Firefox 29 и далее. Вы можете увидеть снимок экрана с разницей здесь или , см. Здесь живой пример.

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

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

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

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

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

20 голосов
/ 28 марта 2012

Как уже говорил @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>
16 голосов
/ 07 июля 2011

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

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

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

#BrowserPrintDefaults{display:none}

будет достаточно.

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

5 голосов
/ 06 марта 2015

Попробуйте этот код, у меня работает 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>
0 голосов
/ 09 января 2019

Это сработало для меня примерно с 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 голосов
/ 03 октября 2016

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

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
0 голосов
/ 11 декабря 2012

@ поля страницы: теперь 0mm работает в Firefox 19.0a2 (2012-12-07).

0 голосов
/ 25 декабря 2009

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...