Я хотел бы поставить страницу для магазина с купоном, который люди могут распечатать и принести в магазин. Я ищу способ позволить им просто распечатать купон, а не всю страницу.Как распечатать изображение?
Я думаю, что, может быть, если бы я положил изображение купона в iFrame, печать там могла бы просто напечатать изображение, но я хотел бы видеть сначала, если есть уже более совершенные, установленные способы сделать это.
Спасибо за любые идеи.
С файлом print.css вы можете скрыть другие элементы сайта (с помощью CSS display: none;), чтобы на странице с купоном отображался только купон при печати.
Вот хорошая статья на print.css: http://alistapart.com/article/goingtoprint
В вашем CSS:
@media print {
.elementsToHide {
display:none;
}
#coupon {
display:block;
}
}
Кроме того, проверить эту статью на эту тему: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/
Вполне возможно, что этот ответ опаздывает, но если вы хотите, чтобы пользователь печатал только изображение, то я думаю, что наилучшим подходом является:
Откройте новую страницу в новом окне/вкладке, которая содержит только изображение (только тег <img> в теге <body>). Таким образом, пользователь может выбрать печать из меню и просто распечатать изображение.
Таким образом, для пользователя ясно, что печатается.
Также вы можете открыть диалоговое окно печати с window.print, которое не соответствует техническим характеристикам, но будет работать во всех браузерах на рабочем столе независимо.
Некоторые уточнения:
Я знаю о стилях печати, и что вы можете полностью изменить порядок страницы с ними, но я обнаружил, что пользователь на самом деле ожидает тот же макет для печати, что он/она видит на мониторе. Создавая и показывая новую страницу только для печати, пользователь получает «предварительный просмотр» того, что будет напечатано, и поэтому он будет более уверенно печатать его.
См. Соответствующий вопрос http://stackoverflow.com/questions/6500962/how-to-print-only-a-selected-html-element – user1929959