Маржа при печати html-страницы

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

Спасибо.

Вы должны использовать 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;  
} 

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

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

Ответ на этот вопрос рекомендует:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Однако в итоге я использовал этот CSS для печати всех своих страниц:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}

Особый случай: длинные столы

Когда мне нужно напечатать таблицу на несколько страниц, то margin:0с @pageлидировал до кровоточащих краев:

Я мог решить эту проблему благодаря этому ответу :

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Плюс установка полей сверху-снизу для @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Результат:

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

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

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

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

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

Если вы печатаете формата А4.

Тогда пользователь

Размер: 8,27 дюйма и 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>

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

• точка (пт)
• сантиметр (см)

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

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

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