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

Question

Возможно ли, чтобы страница HTML выглядела, например, как страница формата A4 в MS Word?

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

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

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

Answer 1

века назад, в ноябре 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)

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

Answer 2

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

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

Answer 3

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

Предполагая, что ваши мониторы показывают 72 точек на дюйм, вы можете добавить что-то вроде этого:

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

Answer 4

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

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

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

Answer 5

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

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

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

Answer 6

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

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

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

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

Answer 7

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

Answer 8

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

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

• 72 точек на дюйм (веб) = 595 X 842 пикселей
• 300 точек на дюйм (печать) = 2480 X 3508 пикселов (Это "A4", как я знаю, что это, т.е. «210мм Х 297мм @ 300 точек на дюйм»)
• 600 точек на дюйм (печать) = 4960 х 7016 пикселей

Answer 9

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

Если вы печатаете размер 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, span, td, a {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; 

    } 

Answer 10

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

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

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

Answer 11

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

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

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

Answer 12

Я видел это решение после того, как поиск в Google, поиск «страницы CSS A4 шаблон "(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).

Answer 13

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

Это HTML для вас Run Фрагмент кода и увидеть де результат:

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/

Answer 14

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

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


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

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