Возможно ли, чтобы страница 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; }То есть титульная страница должна быть напечатана на страницах с именем "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... на всякий случай, если вы еще можете использовать обучающая свой-.
Было бы довольно легко заставить веб-браузер отображать страницу с теми же размерами пикселей, что и 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>
Создайте раздел с каждой страницей и используйте приведенный ниже код для настройки полей, высоты и ширины.
Если вы печатаете размер 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;
}
Размер A4 210x297 мм
Таким образом, вы можете установить HTML-страницу в соответствии с этими размерами с помощью CSS:
html,body{
height:297mm;
width:210mm;
}
Я использовал HTML для создания отчетов, которые распечатываются правильно на реальных размерах на реальной бумаге.
Если вы тщательно используете mm в качестве единиц в файле CSS, вы должны быть в порядке, по крайней мере, для отдельных страниц. Тем не менее, люди могут вас повредить, изменив масштабирование печати в своем браузере.
Кажется, я помню, что все, что я делал, было одной страницей, поэтому мне не нужно было беспокоиться о разбиении на страницы - это может быть намного сложнее.
<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 изображений и т.д., если вы печатаете изображения, которые они будут печатать с размером, аналогичным тому, как они отображаются на экране. процессор печати браузера увеличит DPI изображений с чего-то довольно низкого, как 72dpi, на любой DPI остальной части документа. скажем, изображение отображается на половине ширины страницы, а затем примерно на 4 дюйма в ширину. Ширина пикселя изображения будет примерно 300 пикселей для правильной отображения в браузере. К тому времени, когда он печатает с номинальным 300DPI, процессор добавит пиксели и изображение будет расти примерно до 1200 пикселей, что при 300 DPI составляет 4 дюйма.
когда речь идет о векторных или непиксельных элементах, таких как текст, принтер выбирает свой собственный DPI из драйвера, который не связан с шагом точки экрана или шириной браузера и т.д., если браузер имеет ширину 3000 пикселей, процессор печати будет обертывать текст при необходимости.
что затрудняет создание дисплеев печати: каждый браузер и принтер будут интерпретировать размеры текста (pt, em, px) и интервалы по-своему. в зависимости от того, какой принтер, браузер и, возможно, даже используемая вами ОС, вы получите различное количество строк и символов на странице. так что даже если вы протестируете на своем компьютере с помощью своего браузера и принтера и выясните, что вы можете отображать текст в поле размером 640x900 пикселей и его идеальный вариант для печати, следующий парень, который пытается распечатать, может получить его печать по-другому. нет никакого способа заставить каждый принтер и браузер получать его каждый раз.
забыть пиксели и moreso забыть DPI, единственное, что вы могли бы использовать пиксели для - установить ширину таблицы, которая имитирует ширину области печати на вашем принтере. в этом случае я обнаружил, что ширина 640px близка.
В поисках аналогичной проблемы я нашел это - http://www.indigorose.com/forums/archive/index.php/t-13334.html
A4 - это формат документа в качестве изображения на экране, которое будет зависеть от разрешения изображения, например, документ формата A4, измененный для:
Я знаю, что эта тема довольно старая, но я хочу поделиться своим опытом по этой теме. Фактически, я искал модуль, который мог бы помочь мне с ежедневными отчетами. Я пишу некоторые документы и некоторые отчеты в HTML + CSS (вместо Word, Latex, OO,...). Объект должен был напечатать их на бумаге формата А4, чтобы поделиться им с друзьями... Вместо того, чтобы искать, я решил провести небольшую забавную сессию кодирования для реализации простой библиотеки, которая может обрабатывать "страницы", номер страницы, сводку, заголовок, нижний колонтитул,.... Наконец, я сделал это в ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Вы можете посмотреть этот проект на моем репо и не стесняйтесь делиться своими идеями. Возможно, это не то, что вы ищете на 100%, но я думаю, что этот модуль может вам помочь.
В основном я создаю страницу тела "width: 200mm;" и контейнер высотой: 290 мм (меньше A4). Затем я использовал page-break-after: always; поэтому опция "печать" браузера знает, когда разделить страницы.
Технически вы могли бы, но потребовалось бы много работы, чтобы заставить все браузеры распечатывать страницу точно так, как она отображается на экране. Кроме того, большинство браузеров вынуждают URL-адрес, дату печати и нумерацию страниц на распечатке, что не всегда желательно. Это нельзя изменить или отключить.
Вместо этого я бы посоветовал создать PDF файл на основе содержимого на экране и обслуживать PDF файл для загрузки и/или печати. Хотя большинство доступных PDF-библиотек, есть несколько свободные альтернативы для создания базовых PDF файлов.
Я увидел это решение после поиска в google, поиска "CSS-страницы формата A4" (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>Вполне возможно, чтобы ваш макет допустил пропорции страницы 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 с печатью формата А4, это приведет к чистой распечатке A4 вашей страницы. Вопрос о том, стоит ли инвестировать время, - это еще один вопрос.
Я использовал 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>Много способов сделать:
html,body{
height:297mm;
width:210mm;
}
html,body{
height:29.7cm;
width:21cm;
}
html,body{
height: 842px;
width: 595px;
}