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

388

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

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

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

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

Zabba
источник
12
Вы можете: github.com/delight-im/HTML-Sheets-of-Paper
заметить
Возможный обман: stackoverflow.com/questions/16649943/css-to-set-a4-paper-size
Марк Боулдер
1
Реальные «HTML для печати» является comig! Смотрите всю историю на stackoverflow.com/q/10641667/287948 и модуле фрагментации CSS уровня 3 W3C , который скоро появится!
Питер Краусс
Каково было намерение сделать это? Вы покидаете MS Office для веб-технологий? По крайней мере, это то, что я пытаюсь, но все еще нужно немного узнать, как . Отвечая на это, можно закончить рассказ, начатый этим вопросом.
Стефан

Ответы:

318

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

е-суши
источник
1
Спасибо за обновление этого ответа, чтобы соответствовать текущим стандартам!
jumps4fun
@ A.com Нет px, так как это будет зависеть от DPI ... именно поэтому CSS поддерживает эти очевидные единицы измерения, называемые cmet al. Я советую вам прочитать связанные статьи и / или хотя бы мой ответ. При этом вы быстро заметите, что ваш вопрос на самом деле не имеет смысла. Кроме того, вы можете опубликовать свой вопрос как новый вопрос, если что-то неясно. Это сайт вопросов и ответов, а не форум. \ o /
e-суши
67

Было бы довольно легко заставить веб-браузер отображать страницу с теми же размерами в пикселях, что и 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>
Тим Макнамара
источник
19
Следуя совету Уилла Дина (который имеет большой смысл), используя миллиметры, вы можете заставить браузер вычислять ширину / высоту пикселя: body {height: 420mm; ширина: 297 мм; ...}
Тим Макнамара
49
А4 на самом деле 210х297 мм.
четверть
8
Таким образом, в конце концов портрет DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
Дэйв
1
Проделали немалую работу над этим сейчас, и хотя размеры 210х297 хороши, их не следует считать абсолютно подходящими для страницы А4. Хороший тест - распечатать-> PDF напрямую из Chrome и пролистать превью страницы предварительного просмотра; даже если не заданы поля, полная высота должна быть уменьшена, чтобы избежать переполнения -> которое приводит к тому, что все четные страницы становятся пустыми.
cbmtrx
36

Размер А4 210х297мм

Таким образом, вы можете настроить HTML-страницу для соответствия этим размерам с помощью CSS:

html,body{
    height:297mm;
    width:210mm;
}
zurfyx
источник
Что если у нас есть динамический контент, который может быть до 3-4 или более страниц?
jazzbpn
24

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

Если вы печатаете формат А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;
}
Пир Абдул
источник
Вы уверены, что это работает? Я не мог воспроизвести это в последних Firefox и Chrome.
Дан 7
да, в основном я занимаюсь разработкой для хрома ... отлично работает со мной.
Пир Абдул
3
Я не могу начать @page Section1работать с Chrome 41.0.2272.77. Вы действительно уверены, что ваш ответ работает? Попробуйте, например, посетить data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>и открыть предварительный просмотр. Я не вижу разницы между этим и data:text/html,x. Когда я заменяю @page xна @page, то это работает, но это не специфичный для страницы селектор.
Роб Вт
Для тех, кто не использовал CSS в документах (как и я на момент написания статьи), вы помещаете этот код в теги <style> </ style> и затем вызываете div (например, <div class = page> Stuff </ div > <div class = page> More stuff </ div>), где «Stuff» и «more stuff» - это контент, который должен содержаться на одной странице.
mkingsbu
16

Я использовал HTML для генерации отчетов, которые распечатывались правильно в реальных размерах на реальной бумаге.

Если вы аккуратно используете mm в качестве своих единиц измерения в файле CSS, все должно быть в порядке, по крайней мере, для отдельных страниц. Люди могут вас облажать, изменив масштаб печати в своем браузере.

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

Уилл Дин
источник
14

Я нашел это решение после поиска в 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).

Cas Knook
источник
Использование этого примера с FF 53.0.3 и размещение двух альбомных страниц друг за другом не работает. Выглядит хорошо при обычном просмотре, но при выборе предварительного просмотра он увеличивается до 3 страниц.
lofihelsinki
Не хочу вытащить старых коров из окопа, но я считаю, что тень от коробки должна быть, box-shadow: none;а не 0
NoobishPro
это работает для меня, и я должен изменить высоту
Jomal Johny
Что если у нас есть динамический контент, который может быть до 3-4 или более страниц?
jazzbpn
11
<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;
}
Иаков
источник
10

PPI и DPI не имеют абсолютно никакого значения для того, как документ будет распечатываться в браузере. принтер не принимает информацию о шаге экрана или разрешении изображения и т. д., если вы печатаете изображения, они будут печататься в размере, пропорциональном тому, как они отображаются на экране. процессор печати браузера увеличил бы DPI изображений с чего-то довольно низкого, например 72dpi, до любого DPI, которым является остальная часть документа. Допустим, изображение отображается шириной в половину страницы, тогда его физическая ширина составляет около 4 дюймов. Ширина изображения будет примерно 300 пикселей для правильного отображения в браузере. К тому времени, когда оно печатается с номинальным разрешением 300 точек на дюйм, процессор добавляет пиксели. и изображение вырастет до 1200 пикселей, что при разрешении 300 точек на дюйм равно 4 ".

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

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

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

Квинтин Хамфрис
источник
Прочитайте много страниц, и все они предполагают, что увеличение DPI приведет к уменьшению размера при печати (3000px / 300dpi = 10 дюймов). Но при печати из моего браузера Chrome 600 DPI и 1200 DPI приводят к абсолютно одинаковому размеру на бумаге. Был действительно смущен, пока я не прочитал это!
Ван Шэн
10

В поисках аналогичной проблемы я нашел это - 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 пикселей
Войцех Беднарски
источник
8

Я знаю, что эта тема довольно старая, но я хочу поделиться своим опытом по этой теме. На самом деле, я искал модуль, который может помочь мне с моими ежедневными отчетами. Я пишу некоторые документы и некоторые отчеты на HTML + CSS (вместо Word, Latex, OO, ...). Целью было бы напечатать их на бумаге формата А4, чтобы поделиться ими с друзьями ... Вместо поиска я решил провести небольшую забавную сессию кодирования для реализации простой библиотеки, которая может обрабатывать «страницы», номер страницы, сводку, заголовок , нижний колонтитул, .... Наконец, я сделал это через ~~ 2h, и я знаю, что это не самый лучший инструмент, но он почти подходит для моих целей. Вы можете посмотреть на этот проект в моем репо и не стесняйтесь делиться своими идеями. Возможно, это не то, что вы ищете на 100%, но я думаю, что этот модуль может вам помочь.

В основном я создаю страницу тела "ширина: 200 мм;" и контейнер высотой: 290 мм (меньше, чем А4). Затем я использовал разрыв страницы: всегда; поэтому опция «печать» браузера знает, когда разделять страницы.

РЕПО: https://github.com/kursion/jsprint

Ив Ланге
источник
6

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

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

Prutswonder
источник
5

Я использовал 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/

lynx_74
источник
какая высота для полной страницы в px?
Хаверим
4

Много способов сделать:

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


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

html,body{
    height: 842px;
    width: 595px;
}
Налан Мадхесваран
источник
3

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

FK82
источник