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

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

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

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

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

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

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

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

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

163
browser css html javascript printing

9 ответов

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

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

С

172

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

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

@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 в формате PDF.Яш делать?.

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

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

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

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

84

Как @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

Энтони

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

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

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

#BrowserPrintDefaults{display:none}

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

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

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

17

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

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

7

попробуйте этот код, работает 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>
5

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

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

0

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

0

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

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