Поле під час друку 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із знаком "the" @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. Я не думаю, що пікселі мають велику актуальність з точки зору друку; в ідеалі ви будете використовувати:

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

Я впевнений, що є й інші, і одну чудову статтю про print-css можна знайти тут: Перехід до друку , Ерік Мейєр .

Я також рекомендую pt в порівнянні з см або мм, оскільки це більш точно. Крім того, я не можу заставити @page працювати в Chrome (версія 30.0.1599.69 м). Він ігнорує все, що я поставив для поля, великого чи малого. Але, ви можете змусити його працювати з полями тіла на документі, дивно.

Якщо ви знаєте цільовий розмір паперу, ви можете розмістити свій вміст у DIV з таким певним розміром і додати поле до цього DIV для імітації поля друку. На жаль, я не вірю, що ви маєте додатковий контроль над функцією друку, окрім того, що просто показуєте діалогове вікно друку.