Як зробити сторінку HTML у форматі паперу формату A4?

Чи можна змусити HTML-сторінку поводитись, наприклад, як сторінка формату А4 в MS Word?

По суті, я хочу мати змогу показати сторінку HTML у веб-переглядачі та окреслити вміст у розмірах сторінки формату А4.

Для простоти я припускаю, що HTML-сторінка буде містити лише текст (без зображень тощо), а <br>тегів, наприклад, не буде.

Крім того, коли сторінка HTML надрукована, вона вийде як сторінки паперу формату A4.

В листопаді 2005 року, у листопаді 2005 року, AlistApart.com опублікував статтю про те, як вони опублікували книгу, використовуючи лише HTML та CSS. Дивіться: http://alistapart.com/article/boom

Ось уривок цієї статті:

CSS2 має поняття підказканих носіїв інформації (аркуші аркушів паперу), на відміну від суцільних носіїв інформації (смуги прокрутки). Аркуші стилів можуть встановлювати розмір сторінок та їх поля. Шаблонам сторінок можна надати імена, а елементи можуть вказати, на якій іменованій сторінці вони хочуть надрукувати. Також елементи у вихідному документі можуть примушувати розриви сторінки. Ось фрагмент із таблиці стилів, яку ми використовували:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

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

Після налаштування розміру та поля, нам потрібно було переконатися, що в потрібних місцях є розриви сторінок. Наступний уривок показує, як генеруються розриви сторінок після розділів та додатків:

div.chapter, div.appendix {
    page-break-after: always;
}

Також ми використовували CSS2 для декларування названих сторінок:

div.titlepage {
  page: blank;
}

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

Все одно ...

Оскільки ви хочете надрукувати А4, вам знадобляться різні розміри:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

Стаття занурюється в такі речі, як встановлення перерв на сторінки тощо, тому ви можете прочитати це повністю.

У вашому випадку хитрість полягає в тому, щоб спершу створити CSS для друку. Більшість сучасних браузерів (> 2005) підтримують масштабування і вже зможуть відображати веб-сайт на основі CSS для друку.

Тепер ви захочете зробити так, щоб веб-дисплей виглядав дещо інакше і адаптував весь дизайн так, щоб він підходив і до більшості браузерів (включаючи старі, до 2005 року). Для цього вам доведеться створити веб-файл CSS або замінити деякі частини CSS для друку. Створюючи CSS для веб-відображення, пам’ятайте, що браузер може мати будь-який розмір (подумайте: «мобільний» до «телевізорів з великим екраном»). Значення: для веб-CSS ширину сторінки та ширину зображення найкраще встановлювати за допомогою змінної ширини (%) для підтримки якомога більшої кількості пристроїв відображення та клієнтів веб-перегляду.

EDIT (26-02-2015)

Сьогодні мені трапилось натрапити на ще одну, більш нову статтю SmashingMagazine, яка також занурюється в розробку для друку за допомогою HTML та CSS ... про всяк випадок, якщо ви зможете скористатися ще одним підручником.

EDIT (30-10-2018)

Мені було звернуто увагу на те, що sizeCSS3 не є дійсним, що дійсно правильно - я просто повторив код, процитований у статті, який (як зазначалося) був гарним старим CSS2 (що має сенс, коли ви дивитесь на рік статті та ця відповідь була вперше опублікована). У будь-якому випадку, ось дійсний код CSS3 для зручності копіювання та вставки:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

Якщо ви думаєте, що вам дійсно потрібні пікселі ( ви насправді не повинні використовувати пікселі ), вам доведеться подбати про вибір правильного DPI для друку:

• 72 dpi (веб) = 595 X 842 пікселів
• 300 dpi (друк) = 2480 X 3508 пікселів
• 600 dpi (висока якість друку) = 4960 X 7016 пікселів

Тим не менш, я б уникнув клопоту і просто використовувати cm(сантиметри) або mm(міліметри) для розмірів, тому що уникне появи глюків, які можуть виникати залежно від того, якого клієнта ви використовуєте.

Було б досить легко змусити веб-браузер відображати сторінку з тими ж розмірами пікселів, що і A4. Однак, може бути кілька химерностей, коли речі будуть надані.

Припускаючи, що ваші монітори відображають 72 dpi, ви можете додати щось подібне:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

Розмір формату А4 210x297мм

Таким чином, ви можете встановити HTML-сторінку, щоб вона відповідала цим розмірам CSS:

html,body{
    height:297mm;
    width:210mm;
}

Створіть розділ з кожною сторінкою та скористайтеся наведеним нижче кодом для коригування поля, висоти та ширини.

Якщо ви друкуєте формат А4.

Потім користувач

Size : 8.27in and 11.69 inches

@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>

або

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Я використовував HTML для створення звітів, які правильно роздруковуються у реальному розмірі на реальному папері.

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

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

Я бачив це рішення після пошуку в google, пошуку "Шаблон сторінки A4 CSS" (codepen.io). Він показує область браузера розміром A4 (A3, A5, також портрет), використовуючи тег <page>. Всередині цього тегу відображається вміст, але щодо області браузера все ще існує абсолютна позиція.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

Це працює для мене без включення будь-якої іншої бібліотеки css / js. Працює для поточних браузерів (IE, FF, Chrome).

<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

У вашому звичайному style.css:

table.tableclassname {
  width: 400px;
}

У вашому print.css:

table.tableclassname {
  width: 16 cm;
}

PPI та DPI абсолютно не мають значення для того, як документ буде надрукований у веб-переглядачі. принтер не бере ніякої інформації про крок на екрані або DPI зображень тощо. Якщо ви друкуєте зображення, вони друкувалимуть розмір, аналогічний пропорційному розміру відображення на екрані. процесор друку браузера збільшив би DPI зображень із чогось досить низького, як 72dpi, до будь-якого DPI, що решта документа. скажімо, зображення відображається як півсторінки, то фізично його шириною близько 4 ". Ширина пікселя зображення буде приблизно 300 пікселів для правильного відображення в браузері. На той час, коли він друкується на номінальній 300DPI, процесор додав пікселі а зображення зросте приблизно до 1200 пікселів, що при 300 DPI - це 4 ".

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

ось чому важко створювати друковані екрани: кожен браузер та принтер інтерпретуватимуть розміри тексту (pt, em, px) та пробіли по-своєму. залежно від того, який принтер, браузер і, можливо, навіть ОС ви використовуєте, ви отримаєте різну кількість рядків і символів на сторінці. тож навіть якщо ви протестуєте на своєму комп’ютері за допомогою веб-переглядача та принтера і зрозумієте, що ви можете відобразити текст у вікні розміром 640x900px та його ідеальний для друку, наступний хлопець, який намагається надрукувати, можливо, отримає друк інакше. насправді немає можливості змусити кожного принтера та веб-переглядача кожен раз його ідентикувати.

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

Шукаючи подібну проблему, я знайшов цю - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 - це формат документа, як екранне зображення, яке залежатиме від роздільної здатності зображення, наприклад документ A4 розміром, розміром до:

• 72 dpi (веб) = 595 X 842 пікселів
• 300 dpi (друк) = 2480 X 3508 пікселів (це "A4", як я знаю, тобто "210mm X 297mm @ 300 dpi")
• 600 dpi (друк) = 4960 X 7016 пікселів

Я знаю, що ця тема досить стара, але я хочу поділитися своїм досвідом з цієї теми. Насправді я шукав модуль, який може допомогти мені в моїх щоденних звітах. Я пишу деякі документації та деякі звіти в HTML + CSS (замість Word, Latex, OO, ...). Об'єктивом було б роздрукувати їх на папері формату А4, щоб поділитися ним з друзями, ... Замість пошуку я вирішив провести невеличкий смішний сеанс кодування, щоб реалізувати просту версію, яка може обробляти "сторінки", номер сторінки, резюме, заголовок , колонтитул, .... Нарешті, я це зробив за ~~ 2h, і я знаю, що це не найкращий інструмент коли-небудь, але для моєї мети це майже нормально. Ви можете подивитися на цей проект на моєму репо і не соромтеся поділитися своїми ідеями. Можливо, це не те, що ви шукаєте на 100%, але я думаю, що цей модуль може вам допомогти.

В основному я створюю сторінку тіла "ширина: 200 мм;" та висота контейнера: 290мм (менше А4). Тоді я використовував перерив сторінки: завжди; тож параметр «друк» браузера знає, коли потрібно розділити сторінки.

репо: https://github.com/kursion/jsprint

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

Натомість я б радив створити PDF на основі вмісту на екрані та подати PDF для завантаження та / або друку. Хоча більшість доступних бібліотек PDF платні, є кілька безкоштовних альтернатив для створення основних PDF-файлів.

Я використав 680px у комерційних звітах для друку на сторінках формату A4 з 1998 року. 700px не міг відповідати правильно залежно від розміру поля. Сучасні веб-переглядачі можуть скоротити сторінку, щоб відповідати сторінці принтера, але якщо ви використовуєте 680 пікселів, ви будете правильно друкувати майже в будь-яких браузерах.

Це HTML для запуску фрагмента коду та перегляд результату:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Багато способів зробити:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Цілком можливо встановити ваш макет, щоб припускати пропорції сторінки а4. Вам слід було б лише встановити ширину та висоту відповідно (можливо, перевірити за допомогою window.innerHeightіwindow.innerWidth хоча я не впевнений, що це надійно).

Хитра частина - це друк А4. Наприклад, Javascript підтримує window.printметод друку сторінок лише вручну . Як @Prutswonder запропонував створити PDF з веб-сторінки, мабуть, це найскладніший спосіб зробити це (окрім надання в першу чергу документації PDF). Однак це не так банально, як можна було б подумати. Ось посилання, що містить опис всього класу Java з відкритим кодом для створення PDF-файлів з HTML: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

Очевидно, що коли ви створили PDF з пропорціями формату А4, це призведе до чистого друку формату А4 на вашій сторінці. Чи варто цього інвестувати час - це ще одне питання.