Как напечатать только <div id="printarea"></div>?
Как мне напечатать указанный div (без необходимости вручную отключать остальное содержимое на странице)?
Я хочу избежать появления нового диалогового окна с предварительным просмотром, поэтому создание нового окна с этим содержимым нецелесообразно.
На странице есть несколько таблиц, одна из которых содержит нужный div - таблица оформлена с визуальными стилями для веба, которые не должны отображаться при печати.
4 ответ(ов)
У меня есть более простое решение с минимальным количеством кода.
Поместите вашу печатаемую часть в див с идентификатором, например так:
<div id="printableArea">
<h1>Напечатайте меня</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="напечатать див!" />
Затем добавьте событие, например onclick (как показано выше), и передайте идентификатор дива, как я сделал выше.
Теперь создадим очень простой JavaScript:
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Обратите внимание, как это просто? Никаких всплывающих окон, никаких новых окон, никакого сложного стиля и никаких библиотек JavaScript, таких как jQuery. Проблема с действительно сложными решениями (ответ несложный, и я не о нем) в том, что они НИКОГДА не будут работать во всех браузерах! Если вы хотите изменить стили, сделайте, как показано в отмеченном ответе, добавив атрибут media к ссылке на таблицу стилей (media="print").
Без лишней информации, легковесно, и это просто работает.
С jQuery это делается очень просто:
w = window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
Этот код открывает новое окно, записывает в него HTML-код, полученный из элемента с классом report_left_inner, затем вызывает диалог печати и закрывает окно. Убедитесь, что элемент с классом report_left_inner существует в момент выполнения скрипта, иначе результат может быть неожидаемым.
На данный момент все ответы имеют свои недостатки — они либо предлагают добавлять class="noprint" ко всем элементам, либо портят отображение внутри #printable.
Я считаю, что наилучшее решение - создать обертку вокруг элементов, которые не должны печататься:
<head>
<style type="text/css">
#printable { display: none; }
@media print {
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Ваши обычные содержимое страницы
</div>
<div id="printable">
Версия для печати
</div>
</body>
Конечно, это решение не идеально, так как требует немного изменить структуру HTML...
Чтобы распечатать содержимое определённого элемента на странице, вы можете использовать следующий код JavaScript. Этот скрипт берёт HTML-код элемента с указанным идентификатором и заменяет содержимое всего тела документа на этот элемент, после чего вызывает окно печати. В конце он восстанавливает оригинальное содержимое страницы. Вот код:
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML; // Получаем содержимое элемента
var originalContents = document.body.innerHTML; // Сохраняем оригинальное содержимое страницы
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>"; // Заменяем содержимое на нужный элемент
window.print(); // Вызываем печать
document.body.innerHTML = originalContents; // Восстанавливаем оригинальное содержимое
}
</script>
Примечания:
- Параметр
divId— это ID элемента, который вы хотите распечатать. - Обратите внимание, что после печати оригинальное содержимое страницы восстанавливается, что предотвращает его потерю.
- Этот метод может не функционировать корректно, если в вашем элементе присутствуют внешние стили или скрипты, которые не будут применены при этом подходе.
Получить координаты (X,Y) HTML-элемента
Как узнать, отключен ли JavaScript?
Установить и получить cookie с помощью JavaScript
Добавить подсказку к элементу div
Высота, равная динамической ширине (флюидная верстка на CSS)