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

182

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

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

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

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

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

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

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

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

javascript  html  css  browser  printing 
— Энтони
источник
Есть ли какая-то конкретная причина, почему вы хотите это сделать? Если вы говорите, требование, то, возможно, может быть другое возможное решение ... Для меня изменение пользовательских настроек не выглядит хорошим решением ...
— Nivas
1
Я согласен. Я не хочу менять настройки пользователя. Я хочу перезаписать настройки браузера по умолчанию. И причина в том, что альтернатива заключается в использовании PDF, который кажется ненужным, когда все остальное можно сделать доступным для печати с помощью CSS.
— Энтони
Я вижу, вы проверили ответ как решение, но он работает ТОЛЬКО в Chrome. Вы смогли получить правильное решение кросс-браузер? или хотя бы в нескольких браузерах? потому что у меня та же проблема
— mavili
@mavili см. stackoverflow.com/a/23778125/453605 для кросс-браузерного решения.
— Марчелло Нуччо

Ответы:

200

Стандарт CSS допускает некоторое расширенное форматирование. В @pageCSS есть директива, которая разрешает некоторое форматирование, которое применяется только к постраничным носителям (таким как бумага). См. 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 имеет лучшую реализацию для скрытия верхнего / нижнего колонтитула.

— трепет
источник
1
Для пояснения, это не похоже на удаление заголовков в Firefox 21 или IE10, хотя я подозреваю, что это заставило верхний / нижний колонтитул не занимать место. Он работает с Chrome 28.
— amh15
2
Я обновил, чтобы отразить более новые версии браузера. У Chrome теперь лучшая реализация этого.
— благоговение
@SearchForKnowledge: Да, это так, как я сказал - если вы прочитаете мой ответ под описанием того, как он ведет себя в IE: «Вы увидите, что содержимое страницы действительно расположено правильно, но верхний и нижний колонтитулы браузера скрывают страницу содержание в этой позиции ". Я говорю, что это «имеет эффект» в IE 8, а не то, что он работает так, как мы хотим ... Я отредактирую свой ответ, чтобы сделать это более понятным.
— благоговение
Удаляет заголовки, но также и левый marign. Так что весь мой текст сейчас на краю страницы.
— Митчел
7
Это решение просто не работает вообще , потому что @pageполя и bodyполя - это принципиально разные вещи: bodyполе применяется только ко всему телу , то есть к верхней части первой страницы и нижней части последней страницы. Для всех промежуточных страниц верх / низ будут по-прежнему иметь нулевое поле.
— Конрад Рудольф
86

Любая последняя версия 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атрибут в примере не требуется для удаления текста с полей; Посмотрите, что делает атрибут mozdisallowselectionprint в PDF.js? ,

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

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

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

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

— user2428118
источник
5
честно говоря, я согласен с этим. Это даже работает в Chrome, если вы печатаете с помощью «Системного диалога». просто убедитесь, что <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>установлено. Источник:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383
— Питер
3
Отлично работает на Firefox. Так что это вместе с @page{ size: auto; margin: 3mm; } поддержкой Chrome и Safari сделали кросс-браузерное решение для меня.
— Клин Дсилва
Это решение действительно хорошо работает для удаления нежелательной информации / контента в печатных материалах в FF. Спасибо!
— Варвара Джонс
Это здорово, но как насчет IE?
— Сантош
1
Я протестировал этот фрагмент на Safari 8, 9.1 и 10, и он не удаляет верхний или нижний колонтитул в этих версиях Safari.
— Луис Перес
21

Как уже говорилось @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>
— Работает
источник
3
Это очень хорошее решение! Удаляет поля и удаляет верхний и нижний колонтитулы. Мое единственное изменение состояло в том, чтобы затем добавить padding: 0.25in 0.5in;в стили тела так, чтобы у меня были точные поля, которые мне нужны для красивой, чистой печати. Работая в Chrome v25, и к счастью для этого конкретного проекта, мы можем попросить конечных пользователей выбрать из пары современных браузеров.
— Чарли Шлиссер
2
К сожалению, это вызывает проблемы с многостраничными распечатками. Текст внизу страницы обрезается.
— Джонатан
Отлично работает на Chrome 67.0.3396.99 и Firefox 62.0b5 с выводом одной страницы.
— killscreen
16

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

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

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

#BrowserPrintDefaults{display:none}

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

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

— CAL
источник
В конце концов я сдался, так сильно, как не хотел. Я определенно согласен, что это должно быть выставлено в CSS, так как все браузеры имеют эти настройки, и это элемент презентации. Но вместо этого это сцена в качестве предпочтения уровня приложения, например отключение файлов cookie.
— Энтони
1
Это официальный стандарт CSS, использующий @Pageдирективу для установки поля принтера (которое не совпадает с полем основной страницы html). В настоящее время это поддерживается всеми основными браузерами, кроме Safari, но как это влияет на верхний и нижний колонтитулы, меняется. Лучшие реализации в Opera и Chrome.
— благоговение
6

Попробуйте этот код работает 100% для меня:
для ландшафта:

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

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

</style>
</head>

ДЛЯ Portait:

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

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

</style>
</head>
— Айес мальчик
источник
1
Правила страницы CSS устанавливают поля, но не удаляют встроенный верхний и нижний колонтитулы, размещенные браузером (URL страницы, номер страницы и т. Д.)
— Энтони
0

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

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

— t0mm13b
источник
1
В IE7 + вы можете отключить верхний / нижний колонтитул простым нажатием кнопки в окне предварительного просмотра. Не нужно делать это в реестре!
— благоговение
0

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

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
— Кабир Хоссейн
источник
0

Это сработало для меня с запасом около 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 */
}
— Afshin
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.