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

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



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



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



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

4110   14  

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

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

EDIT (26-02-2015)

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

224  
2016-10-05 02:10:36

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

А4 210x297mm

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

html,body{
    height:297mm;
    width:210mm;
}
26  
2014-03-01 14:49:09

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

Если вы печатаете размер 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  
2018-07-06 14:41:45

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

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

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

16  
2010-07-27 10:49:31 
<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  
2011-06-17 10:37:29

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

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

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

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

11  
2011-06-04 02:03:18

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

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

  • 72 dpi (web) = 595 X 842 пикселей
  • 300 точек на дюйм (печать) = 2480 X 3508 пикселей (Это "A4", как я его знаю, т. е. "210 мм х 297 мм @ 300 dpi")
  • 600 dpi (печать) = 4960 X 7016 пиксели
10  
2012-02-04 00:36:41

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

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

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

8  
2014-05-12 01:58:12

Я видел это решение после поиска в 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  
2017-03-26 12:12:14

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

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

6  
2010-07-27 10:40:45

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

3  
2010-07-27 11:21:50

я использовал 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  
2017-06-01 16:25:56

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

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


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

html,body{
    height: 842px;
    width: 595px;
}
2  
2017-09-20 06:04:19

Comments

    Ничего не найдено.
Click here to cancel reply.