Маржа при печати html-страницы - PullRequest
Новая
       31

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

119 голосов
/ 09 октября 2009

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

Спасибо.

Ответы [ 6 ]

212 голосов
/ 09 октября 2009

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

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

20 голосов
/ 14 января 2018

Во-первых, я стараюсь заставить всех своих пользователей использовать 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 приводил к кровоточащим краям:

bleeding edges

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

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;
}

Результат:

solved bleeding edges

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

9 голосов
/ 31 января 2013

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

@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>
9 голосов
/ 09 октября 2009

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

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

Я уверен, что есть и другие, и одну отличную статью о print-css можно найти здесь: Going to Print , Eric Meyer .

1 голос
/ 10 октября 2013

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

0 голосов
/ 09 октября 2009

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

...