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

Отвечать

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

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

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

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

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

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

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

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

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

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

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

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

display:none; //is your friend!

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

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

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

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

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

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

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