Как разработать веб-страницу, чтобы быть дружественной печатью?
Каковы правильные размеры для веб-страницы, которая будет распечатана на листе формата А4? Чем нужно рассмотреть другой материал?
*встройте CSS, предпочтен в этом случае
Разъяснение: Эта единственная веб-страница делает предложение, должен быть распечатан, так как это - получение.
Разъяснение № 2: Эта веб-страница для внутреннего пользования компании, на которую я работаю. Они хотели бы, чтобы это посмотрело профессионально разработанное получение.
Разъяснение № 3: Эта веб-страница должна быть распечатана на одной странице - размера A4 - только.
4 ответа
]Answer[
] [] Я бы порекомендовал использовать две разные таблицы стилей. [
] []Для просмотра в браузере можно установить ширину таблицы на ширину бумаги формата A4: 21 см. (Минус поля 18 см.) [
] [] Для печати размер таблицы должен быть "100%", что означает, что принтер заполняет всю ширину страницы, [] используя поля, заданные настройками браузера []. (Именно эти поля страницы делают невозможным, чтобы распечатка выглядела точно так же)[
]. []Possibly working[
] [] Сделайте таблицу достаточно узкой, чтобы быть уверенной, что она находится на полях страницы. Затем отцентрируйте таблицу по вертикали. [
] [] Решение для идеальной компоновки [
] [] Невозможно добиться этого с помощью 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;}
для того, чтобы скрыть его в печати.
дайте мне знать, полезно это или нет
.Как говорили другие ребята, вам нужно использовать CSS для печати, но помните одно:
display:none; //is your friend!
Вы можете использовать это, чтобы убедиться, что такие элементы, как ваша навигация и т.д., не будут распечатаны.
Кстати, в A List Apart есть отличная статья о таблицах стилей печати, посмотрите.
Сделайте вашу версию для печати как можно более простой и свободной от листовой мебели.
Необходимо создать таблицу стилей для печати, которая, как минимум, снимает ограничения по ширине страницы, чтобы печатная страница могла пропускать текст в соответствии с бумагой для печати.
Следует также учитывать, что большинство браузеров не печатают CSS-фоновые изображения по умолчанию, поэтому не полагайтесь на их присутствие на печатной странице.
EDIT: В ответ на ваш комментарий я сделаю квитанцию как можно более простой. Основная проблема заключается в том, что у вас нет контроля над принтером конечного пользователя, поэтому вы не можете точно знать, насколько широка область печати.
Создайте страницу, используя жидкостную/расходную верстку, и постарайтесь сделать ее проще. Стиль квитанции Amazon, которую вы получаете в коробке для доставки, вероятно, стоит использовать для вдохновения.