Как сделать веб-страницу удобной для печати? - PullRequest
7 голосов
/ 05 января 2010

Какого размера веб-страница печатается на бумаге формата A4? Какие еще вещи следует учитывать?

* встроенный CSS предпочтителен в этом случае

Уточнение: Единственное предложение на этой веб-странице - печать, так как это квитанция.

Разъяснение № 2: Эта веб-страница предназначена для внутреннего пользования компанией, в которой я работаю. Им бы хотелось, чтобы это выглядело профессионально оформленной квитанцией.

Пояснение № 3: Эта веб-страница должна быть напечатана только на одной странице формата А4.

Ответы [ 4 ]

5 голосов
/ 05 января 2010

Ответ

Я бы рекомендовал использовать две разные таблицы стилей.

Для просмотра в браузере вы можете установить ширину стола равной ширине бумаги формата А4: 21 см. (Минус поля 18см.)

Для печати размер таблицы должен быть «100%», что означает, что принтер заполняет всю ширину страницы, используя поля, заданные настройками браузера . (Эти поля страницы делают невозможным, чтобы распечатка выглядела точно так же.)

Возможно, работает

Сделайте таблицу достаточно узкой, чтобы быть в безопасности, она находится на полях страницы. Затем отцентрируйте этот стол вертикально.

Решение для идеального макета

Невозможно достичь этого с помощью HTML и CSS, он просто не предназначен для точных макетов!

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

3 голосов
/ 05 января 2010

лучший способ - использовать команду @Media в таблице стилей

например

@media print{}

использовать для печати макета всех элементов управления и

@media screen{}

используется для макета экрана управления, просто подумайте, что у вас есть

<div class="wrapper">content</div>

и тогда в ваших медиа вы должны иметь

@media print{ .wrapper{width: 100%;background-color:Transparent;color:Black;}}

и

@media screen{ .wrapper{width: 100%;background-color:#cdebcd;color:Red;}}

с помощью этого @media вы можете совершенно разным образом оформить макет для печати и экрана. Вы также можете использовать

.SomeDivOrContent{visibility:hidden;display:none;}

чтобы скрыть в печати. ​​

дайте мне знать, было ли это полезно или нет

2 голосов
/ 05 января 2010

Как и другие парни сказали, что вам нужно использовать CSS для печати, но помните одну вещь:

display:none; //is your friend!

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

Между прочим, в A List Apart есть отличная статья о печатных таблицах стилей , посмотрите ее.

2 голосов
/ 05 января 2010

Сделайте вашу версию для печати как можно более простой и свободной от пейджинга.

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

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


РЕДАКТИРОВАТЬ: В ответ на ваш комментарий, я бы сделал квитанцию ​​как можно проще. Основная проблема заключается в том, что вы не можете контролировать принтер конечного пользователя, поэтому вы не можете точно знать, насколько широка область печати. ​​

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

...