Відключення параметрів друку браузера (заголовки, колонтитули, поля) зі сторінки?

182

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

Чи є спосіб, як за допомогою CSS, так і javascript, змінити настройки принтера за замовчуванням, коли хтось друкує у своєму браузері? І звичайно, під "відбитками з їх браузера" я маю на увазі певну форму HTML, а не PDF або якусь іншу модуль, що належить mime-типу.

Будь ласка, запиши:

Якщо деякі браузери пропонують це, а інші не (або якщо ви лише знаєте, як це зробити для деяких браузерів), я вітаю рішення, специфічні для браузера.

Так само, якщо ви знаєте про звичайний браузер, у якого є специфічні обмеження щодо EVER, що це робить, це також корисно, але деякі досить актуальні документи будуть вдячні. (просто кажучи, що "це суперечить політиці безпеки XYZ" не є дуже переконливим, коли XYZ в останні три роки внесла значні зміни в політику)

Нарешті, коли я кажу "змінити параметри друку за замовчуванням", я не маю на увазі назавжди, лише для своєї сторінки, і я маю на увазі конкретні поля друку, заголовки та колонтитули.

Мені дуже відомо, що CSS пропонує можливість зміни орієнтації сторінки, а також поля сторінки. Одна з багатьох боротьб - з Firefox. Якщо я встановити поля сторінки в 1 дюйм, він додає це до половини дюйма, який він вже ставить на місце.

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

javascript  html  css  browser  printing 
— Ентоні
джерело
Чи є якась конкретна причина, чому ви хочете це зробити? Якщо ви вимовите вимогу, то, можливо, може бути інше можливе рішення ... Для мене зміна налаштувань користувача не виглядає як приємне рішення ...
— Nivas
1
Я згоден. Я не хочу змінювати налаштування користувача. Я хочу замінити налаштування браузера за замовчуванням. Причина полягає в тому, що альтернативою є використання PDF-файлу, який видається непотрібним, коли все інше можна зробити принтером зручним через CSS.
— Ентоні
Я бачу, що ви перевірили відповідь як рішення, але вона працює ТОЛЬКО в хромі. чи вдалося вам отримати правильне рішення крос-браузера? або принаймні в кількох браузерах? тому що я маю те саме питання
— mavili
@mavili см stackoverflow.com/a/23778125/453605 для вирішення крос-браузера.
— Marcello Nuccio

Відповіді:

200

Стандарт CSS забезпечує деяке розширене форматування. Існує @pageдиректива в CSS, яка дозволяє певне форматування, яке стосується лише тимчасових носіїв інформації (як папір). Див. 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, не те, що він працює так, як ми хочемо ... Я відредагую свою відповідь, щоб зробити це зрозумілішим.
— трепет
Видаляє заголовки, але також лівий напис. Тож весь мій текст зараз знаходиться на краю сторінки.
— Мітчел
7
Це рішення просто не працює взагалі , тому що @pageполя та bodyполя - це принципово різні речі: bodyмаржина стосується лише всього тіла , тобто верхньої частини першої сторінки та нижньої частини останньої сторінки. Для всіх проміжних сторінок верхній / нижній все ще матимуть нульовий запас.
— Конрад Рудольф
86

Будь-яка остання версія Chrome і Opera, а також Firefox 48 alpha 1 і новіші

Ви можете встановити поля сторінки до розміру який занадто малий , щоб містити текст, щоб відключити це (запозичення з благоговіння «s відповіді):

@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 для мене вирішило крос-браузер.
— Клін Дільва
Це рішення дуже добре працює для видалення небажаної інформації / вмісту у друкованих матеріалах у ФФ. Дякую!
— Варвара Джонс
Це чудово, але що з 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-адреса, сторінка та заголовок не мають значення та призводять до менш приємного кінцевого продукту. У чомусь це виглядає просто дешево.

Медіа = Друк не вдалося вимкнути ці налаштування браузера. Єдине вирішення - сказати користувачеві натиснути кнопку "Шестірня" та включити / вимкнути ці елементи. Якщо серйозно, я не мав уявлення, що можу це зробити протягом 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>

ДЛЯ Портаїта:

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

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

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

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

Сподіваюся, що це допомагає і з святами, найкращими побажаннями, Томе.

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