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

Question

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

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

Разъяснение: Единственное, что предлагается на этой веб-странице, - это распечатать, поскольку это квитанция.

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

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

Answer 1

Ответ

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

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

Для печати размер таблицы должен быть "100%", что означает, что принтер заполняет всю ширину страницы, используя поля, заданные настройками браузера.(Из-за этих полей страницы вы не сможете сделать распечатку точно такой же.)

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

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

Решение для идеальной планировки

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

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

Answer 2

лучший способ - использовать команду from @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;}

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

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

Answer 3

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

display:none; //is your friend!

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

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

Answer 4

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

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

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

---

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

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