Как распечатать только часть страницы?
Я пытаюсь скрыть некоторые div до того, как пользователь напечатает эту гигантскую форму, а затем снова отобразить div. Таким образом, я хочу игнорировать остальную часть страницы и распечатать только саму форму.
Конечно, я мог открываю отдельную страницу, когда пользователь нажимает кнопку печати. Единственное, форма действительно длинная, и это было бы довольно утомительно.
Обновлено: мой предыдущий вопрос на самом деле не отражал то, что я искал. Поэтому я поменял его на текущий.
Также спасибо всем, что предложили window.onbeforeprint и window.onafterprint. Это имело отношение к моему отредактированному вопросу.
Оно делает. Но я не могу принять два ответа.
Отвечает ли это на ваш вопрос? Как скрыть элемент при печати веб-страницы?
Ответы 4
Во-первых, правильный путь:
Взгляните на window.onbeforeprint и window.onafterprint (исходный вопрос, заданный о том, как это сделать программно, я считаю).
Теперь лучший способ:
Лучший способ сделать это - использовать стиль, специально предназначенный для печати. Другими словами, ваш div может выглядеть так:
<div class = "someClass noPrint">My Info</div>
Тогда у вас будет это в своей таблице стилей:
.someClass {font-family:arial;}
@media print {
.noPrint { display: none; }
}
Другой вариант
Вы также можете поместить это в отдельную таблицу стилей, если хотите, чтобы вам не приходилось смешивать стили:
<link rel = "stylesheet" type = "text/css" media = "print" href = "print.css">
В вашей таблице стилей экрана может быть определен ".someClass" одним способом, а затем в вашей таблице стилей печати он может быть определен совершенно другим способом.
Так мы и делаем в моей компании. Он работает очень хорошо, и нам не нужно возиться с JavaScript.
Да, мы устанавливаем noPrint для всех разделов верхнего и нижнего колонтитула, а также для всех меню, которые не должны печататься.
Я предпочитаю создавать отдельную таблицу стилей, которая обрабатывает все изменения стиля, связанные с печатью, а не добавлять их в существующие таблицы стилей.
Вы можете рассмотреть возможность создания таблицы стилей специально для печати с использованием media = "print"
IE поддерживает onbeforeprint и onafterprint, но на самом деле вам нужна таблица стилей печати.
<link rel = "stylesheet" type = "text/css" media = "print" href = "print.css">
См. Также: этот ответ
Вам действительно стоит реализовать это как CSS media = print styles. Атрибут media элемента ссылки может использоваться для выбора того, к какому медиа применяется таблица стилей. Проверить эта статья
Относительно вашего редактирования: мой ответ не отвечает на ваш вопрос? Я думаю, что лучший способ - добавить стиль к вашим div, а затем использовать @media в вашей таблице стилей или ссылку для печати таблицы стилей.