Как сделать страницу HTML на бумаге формата А4?

Можно ли заставить страницу HTML вести себя, например, как страница формата A4 в MS Word?

По сути, я хочу иметь возможность отображать HTML-страницу в браузере и обрисовывать содержание в размерах страницы формата A4.

Для простоты я предполагаю, что HTML-страница будет содержать только текст (без изображений и т. Д.) И, например, не будет никаких <br>тегов.

Кроме того, при печати страницы HTML она будет отображаться как бумажные страницы формата A4.

Много лет назад, в ноябре 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 описал концепцию именованных страниц, но их значение становится очевидным только тогда, когда доступны верхние и нижние колонтитулы.

Тем не мение…

Поскольку вы хотите напечатать A4, вам, конечно, понадобятся разные размеры:

@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 ваши ширина страницы и ширина изображения лучше всего настраиваются с использованием переменной ширины (%), чтобы поддерживать как можно больше устройств отображения и клиентов для просмотра веб-страниц.

РЕДАКТИРОВАТЬ (26-02-2015)

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

РЕДАКТИРОВАТЬ (30-10-2018)

Это было доведено до моего сведения тем, что sizeэто недействительный CSS3, что действительно правильно - я просто повторил код, цитируемый в статье, который (как было отмечено) был старым добрым 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 точек на дюйм (печать) = 2480 х 3508 пикселей
• 600 точек на дюйм (высокое качество печати) = 4960 х 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 210х297мм

Таким образом, вы можете настроить 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 для генерации отчетов, которые распечатывались правильно в реальных размерах на реальной бумаге.

Если вы аккуратно используете mm в качестве своих единиц измерения в файле 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 изображений с чего-то довольно низкого, например 72dpi, до любого DPI, которым является остальная часть документа. Допустим, изображение отображается шириной в половину страницы, тогда его физическая ширина составляет около 4 дюймов. Ширина изображения будет примерно 300 пикселей для правильного отображения в браузере. К тому времени, когда оно печатается с номинальным разрешением 300 точек на дюйм, процессор добавляет пиксели. и изображение вырастет до 1200 пикселей, что при разрешении 300 точек на дюйм равно 4 ".

Когда речь идет о векторных или непиксельных элементах, таких как текст, принтер выбирает свой собственный DPI из драйвера, который не связан с шагом экрана или шириной браузера и т. д. Если браузер имеет ширину 3000 пикселей, процессор печати будет обтекать текст соответствующим образом.

Вот что затрудняет создание дисплеев для печати: каждый браузер и принтер будут интерпретировать размеры текста (pt, em, px) и интервалы по-своему. в зависимости от того, какой принтер, браузер и, возможно, даже ОС вы используете, вы получите различное количество строк и символов на странице. так что даже если вы тестируете на своем компьютере с помощью браузера и принтера и обнаруживаете, что можете отображать текст в поле размером 640x900 пикселей и идеально печатать его, следующий парень, который попытается напечатать, возможно, получит печать иначе. на самом деле нет никакого способа заставить каждый принтер и браузер каждый раз идентифицировать его.

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

В поисках аналогичной проблемы я нашел это - http://www.indigorose.com/forums/archive/index.php/t-13334.html

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

• 72 dpi (веб) = 595 X 842 пикселей
• 300 точек на дюйм (печать) = 2480 х 3508 пикселей (это «А4», как я знаю, то есть «210 мм х 297 мм @ 300 точек на дюйм»)
• 600 точек на дюйм (печать) = 4960 х 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-файл с печатью пропорций A4, это приведет к чистому отпечатку страницы формата A4. Стоит ли тратить время - другой вопрос.