Как сделать HTML-страницу в формате A4 Paper size page(s)?

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

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

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

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

297
css html printing

14 ответов

века назад, в ноябре 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) поддерживают масштабирование и уже смогут отображать веб-сайт на основе Print CSS.

теперь вы захотите сделать веб-дисплей немного другим и адаптировать весь дизайн под большинство браузеров (включая старые, до 2005 года). Для этого вам придется создать веб-файл CSS или переопределить некоторые части вашего Print CSS. При создании CSS для веб-дисплея помните, что браузер может иметь любой размер (подумайте: "мобильный" до "телевизоров с большим экраном"). Значение: для веб-CSS ваша ширина страницы и ширина изображения лучше всего установить с помощью переменной ширины (%) для поддержки как можно большего количества устройств отображения и клиентов веб-просмотра.

EDIT (26-02-2015)

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

224

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

А4 210x297mm

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

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

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

Если вы печатаете размер A4.

пользователь

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

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

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

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

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

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

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

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

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

11

Ищу подобную проблему я нашел это - http://www.indigorose.com/forums/archive/index.php/t-13334.html

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

  • 72 dpi (web) = 595 X 842 пикселей
  • 300 dpi (печать) = 2480 X 3508 пикселей (Это "A4", как я его знаю, то есть"210mm X 297mm @ 300 dpi")
  • 600 т / д (печать) = 4960 X 7016 пиксели
10

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

в основном я создаю страницу тела "ширина: 200 мм;" и контейнер высоты: 290 мм (меньше A4). Затем я использовал page-break-after: always; поэтому опция" печать " браузера знайте, когда разбивать страницы.

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

8

Я видел это решение после поиска в google, Поиск " A4 CSS шаблон страницы "(codepen.io). Он показывает область формата A4 (A3,A5, также портрет) в браузере, используя тег . Внутри этого тега отображается содержимое, но абсолютное положение по-прежнему относительно окна обозревателя.

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).

7

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

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

6

вполне возможно установить ваш макет, чтобы принять пропорции страницы формата А4. Вам нужно будет только установить ширину и высоту соответственно (возможно, проверьте с window.innerHeight и window.innerWidth хотя я не уверен, что это надежно).

сложная часть связана с печатью A4. JavaScript на примере только поддерживает печать страницы rudimentarily с window.print метод. Как @Prutswonder предложил создать PDF С веб-страницы, вероятно, является самым сложным способом это (кроме предоставления документации PDF в первую очередь). Однако, это не так тривиально, как может показаться. Вот ссылка, которая имеет описание класса Java с открытым исходным кодом для создания PDF-файлов из HTML:http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html .

очевидно, как только вы создали PDF с печатью пропорций A4, это приведет к чистой печати A4 вашей страницы. Стоит ли тратить на это время-другое дело. вопрос.

3

я использовал 680px в коммерческих отчетах печатать на страницах формата А4 с 1998 года. 700px не может правильно поместиться в зависимости от размера полей. Современные браузеры могут сжимать страницы в соответствии со страницей на принтере, но если вы используете 680 пикселей, вы будете печатать правильно почти в любом браузере.

это HTML для вас выполнить фрагмент кода и см. de результат:

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/

3

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

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


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

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