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

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

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

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

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

e-sushi
Редактировал вопрос 3-го августа 2015 в 5:25
Программирование
printing html css
27-го июля 2010 в 7:26
573 просмотров
Комментарии к вопросу (4)
Решение

Сто лет назад, в ноябре 2005 года AlistApart.com была опубликована статья о том, как они опубликовали книгу, используя только HTML и CSS. См.: http://alistapart.com/article/boom

Здесь'ы отрывок из этой статьи:

в CSS2 есть понятие выгружаемого СМИ (вспомните листы бумаги), в отличие от сплошных средах (думаю, полосы прокрутки). Таблицы стилей можно задать размер страниц и их полями. Шаблоны страниц можно давать имена и элементы государства, которое назвал страницу, они хотят быть напечатано на. Кроме того, элементы в исходном документе может заставить разрывы страниц. Вот фрагмент таблицы стилей, которые мы использовали:

@страница { размер: 7 дюймов 9,25 дюйма; поле: 16 мм 27 мм 27 мм 16мм; }

наличие американского издателя, мы были учитывая размер страницы в дюймах. Мы, европейцы, продолжают с метрической. В CSS можно как.

после установки до размера страницы и полей, мы должны убедиться, есть разрывы страниц в нужных местах. Следующий фрагмент показывает, как разрывы страниц, созданных после главы и приложения:

разд.глава, разд.добавление { разрыв страницы-после: всегда; }

кроме того, мы использовали в CSS2 для объявления именованных страниц:

разд.титульная страница { страницы: пустой; }

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

В любом случае...

Поскольку вы хотите печатать А4, вы'll необходимо различные аспекты курса:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

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

В вашем случае, хитрость заключается в том, чтобы создать печать CSS сначала. Большинство современных браузеров (>2005) поддержка масштабирования и уже сможете вывести сайт на основе печати в CSS.

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

Редактировать (26-02-2015)

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

Редактировать (30-10-2018)

Это было доведено до моего сведения, что "размер" не является допустимым помощью 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 х 842 пикселей
  • 300 dpi (для печати) = 2480 х 3508 пикселей
  • 600 точек на дюйм (высокое качество печати) = 4960 х 7016 пикселей

Однако, я хотел бы избежать хлопот и просто использовать см (сантиметры) или " мм " (миллиметры) для калибровки как то, что избегает перевода глюками, которые могут возникнуть в зависимости от того, какой клиент вы используете.

e-sushi
Редактировал ответ 30-го октября 2018 в 6:57
Комментарии (0)

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

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





    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
Rich Bradshaw
Редактировал ответ 17-го февраля 2015 в 10:47
Комментарии (4)

Размер А4 210х297

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

html,body{
    height:297mm;
    width:210mm;
}
Комментарии (0)

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

При печати формата А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;
}
dzimiks
Редактировал ответ 6-го июля 2018 в 11:41
Комментарии (5)

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

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

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

Комментарии (0)

В стиле вашей обычной.Усс:

table.tableclassname {
  width: 400px;
}

В печати вашему.Усс:

table.tableclassname {
  width: 16 cm;
}
Kevin
Редактировал ответ 17-го июня 2011 в 7:37
Комментарии (0)

Я видел это решение через поиск в Google, поиск на "А4 CSS в шаблон страницы и" (сайт CodePen.Ио). Это показывает, формата А4 (А3,А5, а также портрет) размером с площадь в браузере, используя &ЛТ;&амп страница;и GT; тег. Внутри этого тега отображается содержимое, но абсолютное положение по-прежнему относительно окна обозревателя.<БР>

в 

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

в

Это работает для меня без каких-либо CSS-или JS-библиотеку, которые будут включены. Работает на всех современных браузерах (ИЕ, ФФ, хром).

Cas Knook
Редактировал ответ 26-го марта 2017 в 9:12
Комментарии (3)

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

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

  • Разрешением 72 dpi (веб) = 595 х 842 пикселей
  • 300 dpi (для печати) = 2480 х 3508 пикселей (Это на "А4" и как я знаю, что это, т. е. на "210мм х 297 мм @ 300 точек на дюйм и")
  • 600 т / д (печать) = 4960 х 7016 пикселей
Комментарии (0)

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

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

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

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

Комментарии (1)

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

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

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

Yves Lange
Редактировал ответ 11-го мая 2014 в 10:58
Комментарии (0)

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

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

Комментарии (0)

Я использовал 680px в коммерческой печати отчета на страницы А4 с 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/

Комментарии (1)

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

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

Очевидно, что после создания PDF с А4 пропорций печати это выльется в чистом А4 печать вашей страницы. Ли, что's стоит времени инвестиции-это другой вопрос.

Комментарии (0)

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

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

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

html,body{
    height: 842px;
    width: 595px;
}
Комментарии (0)