Поля при печати html-страницы

Ответ 1

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

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Для размеров шрифтов используйте pt для печатного носителя.

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

Вы также должны знать, что IE7 ++ автоматически настраивает размер, который лучше всего подходит, и вызывает все неправильное, даже если вы используете cm или mm. Чтобы отменить это поведение, пользователь должен выбрать "Предварительный просмотр печати", а затем установить размер печати 100% (по умолчанию - Shrink To Fit).

Лучшим вариантом полного контроля над печатными полями является использование директивы @page для установки поля бумаги, что повлияет на маржу на бумаге вне элемента тела html, который обычно контролируется браузером. См. http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
В настоящее время это работает во всех основных браузерах, кроме Safari.
 В Internet explorer значение по умолчанию для этого значения задано в настройках этой печати, и если вы сделаете предварительный просмотр, вы получите это как значение по умолчанию, но пользователь может изменить его в предварительном просмотре.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

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

Ответ 2

Я лично предложил бы использовать другую единицу измерения, чем px. Я не думаю, что пиксели имеют большое значение с точки зрения печати; в идеале вы будете использовать:

• point (pt)
• сантиметр (см)

Я уверен, что есть другие, и одна отличная статья о print-css можно найти здесь: Переход к печати, Эрик Майер.

Ответ 3

Обновлено, простое решение

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Старое решение

Создайте раздел с каждой страницей и используйте приведенный ниже код для настройки полей, высоты и ширины.

Если вы печатаете размер A4.

Затем пользователь

Размер: 8.27in и 11.69 дюймов

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

затем создайте div со всем содержимым.

<div class="Section1"> 
    type your content here... 
</div>

Ответ 4

Я также рекомендую pt против cm или mm, насколько это более точно. Кроме того, я не могу заставить @page работать в Chrome (версия 30.0.1599.69 м). Он игнорирует все, что я помещаю для полей, больших или малых. Но вы можете заставить его работать с полями тела на документе, странно.

Ответ 5

Если вы знаете размер целевой бумаги, вы можете разместить свой контент в DIV с указанным размером и добавить маржу к этому DIV для имитации поля печати. К сожалению, я не верю, что у вас есть дополнительный контроль над функциями печати, кроме как просто показать диалоговое окно печати. ​​