Только печать <div id = "printarea"> </div>?
Как распечатать указанный div (не отключая вручную все остальное содержимое на странице)?
Я хочу избежать появления нового диалогового окна предварительного просмотра, поэтому создание нового окна с этим содержимым бесполезно.
Страница содержит несколько таблиц, одна из них содержит div, который я хочу распечатать - таблица оформлена с использованием визуальных стилей для Интернета, которые не должны отображаться при печати.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 30
Не могли бы вы использовать таблица стилей печати и использовать CSS для упорядочивания содержимого, которое вы хотели напечатать? Прочтите эту статью для дополнительных указателей.
У меня есть таблица стилей для печати - я стараюсь не помещать правила стиля во все остальное содержимое ...
У меня есть таблица со стилями, содержащая рассматриваемый div. Если я установлю отображение таблицы: нет - могу ли я отображать div?
Думаю, да, и вы могли бы попробовать пометить правило как! Важно, чтобы усилить его!
если таблица не отображается, это не имеет значения, даже если для div установлено значение «display: awesome;». Родитель скрыт, как и дети. Это ситуация, когда вам нужна таблица или это просто для макета страницы?
"Бум, выстрел в голову!" по раскладке стола. = |
хм ... используйте тип таблицы стилей для печати ... в:
<link rel = "stylesheet" type = "text/css" href = "print.css" media = "print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
Это не сработает, если документ не основан на DIV или #yourdiv также включает дополнительные DIV.
#yourdiv * {display: ...} если вы разместите это вверху страницы и у вас будет современный браузер, вы можете работать с другими селекторами, чтобы скрыть не div
"#yourdiv * {display: ...}" - что должно быть ... без нарушения макета?
Это отобразит встроенные элементы также как блочные. Но «#yourdiv, #yourdiv div {display: block}» сделает это.
@dittodhole - задумайтесь на минутку. Что вы могли бы добавить туда, чтобы не нарушить макет в #yourdiv?
обкатка - но не поддерживается обычными браузерами. только рабочие значения: inline, block и none (элемент списка с ie> 5). так что я бы сказал: это зависит от макета! но я бы предпочел решение Gumbo с моим представлением о незнании того, что на странице
Проблема в том, что практически в любом макете есть сочетание блочного и встроенного. Даже что-то очень простое вроде этого: <p> Это <b> </b> не работает. </p> <p> Если вы выберете встроенный <b> или </b> блок </p>
поэтому я хотел бы создать 2 разных материнских блока, как здесь stackoverflow.com/questions/468881/…
@downvoter: постарайтесь уточнить, чтобы я мог исправить свой ответ?
Используйте специальную таблицу стилей для печати
<link rel = "stylesheet" href = "print.css" type = "text/css" media = "print" />
а затем добавьте класс, то есть «noprint», к каждому тегу, содержимое которого вы не хотите печатать.
В CSS используйте
.noprint {
display: none;
}
Вы можете использовать отдельный стиль CSS, который отключает любой другой контент, кроме контента с идентификатором printarea.
См. CSS-дизайн: готовимся к печати для дальнейших объяснений и примеров.
Обновлена ссылка на новое место. Комментарий вместо отрицательного было бы неплохо.
С CSS 3 вы можете использовать следующее:
body *:not(#printarea) {
display: none;
}
Не могу использовать это, боюсь ... (поправьте меня, если ошибаюсь) страница, над которой я работаю, - asp.net 1.1 / DHTML
Это зависит от браузера, доступен ли уже селектор: not () или нет.
Что ж, тогда мое предложение - это просто заглянуть в будущее… Нет, серьезно. Я просто упомянул об этом для полноты картины. Я знаю, что сейчас это невозможно. К несчастью.
Вы можете использовать jQuery и этот селектор, который (я думаю) будет работать в IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
это скроет всех потомков #printarea, поскольку им соответствует *: not (#printarea). Таким образом, вы получаете пустой контейнер.
Все ответы на данный момент довольно ошибочны - они либо включают добавление class = "noprint" ко всему, либо испортят display в #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">
Your normal page contents
</div>
<div id = "printable">
Printer version
</div>
</body>
Конечно, это не идеально, так как требует небольшого перемещения вещей в вашем HTML ...
Я думаю, что вы правы, но как мне убить стиль таблицы, окружающей div (если это возможно, чтобы удалить стиль - я могу распечатать таблицу и довольно легко исключить остальной контент
Я использую Javascript для получения необходимого контента и CSS, как указано выше.
Я предпочитаю использовать семантический HTML. Форматирование печати в идеале должно выполняться с помощью CSS. См. Мой ответ, как это сделать: stackoverflow.com/questions/468881/…
Согласитесь с Беннеттом, использование видимости вместо отображения - гораздо более чистое решение.
Я сделал действительно простое решение ниже в этой ветке, которое, как я думаю, лучше удовлетворит потребности спрашивающего. Он не полагается на таблицу стилей печати, может быть переработан на всем вашем веб-сайте и невероятно легкий.
@BennettMcElwee Но это не позволяет вам динамически изменять, какие части страницы печатаются в зависимости от других условий, и это единственная причина, по которой, я полагаю, кто-то будет искать JavaScript для достижения этой цели.
@emodendroket Совершенно верно, если вы хотите делать динамические вещи, вам понадобится JavaScript. Используя, например, мое решение, вы можете использовать JS для присвоения идентификатора section-to-print той части страницы, которую вы хотите распечатать. Это касается динамического аспекта. Затем CSS позаботится об аспекте представления (печати), как и должно.
@BennettMcElwee Конечно. Я согласен, но не понимаю, чем это отличается от этого ответа.
@emodendroket Этот ответ требует, чтобы вы определенным образом структурировали страницу и создали отдельную «версию для принтера», которая вообще не отображается на экране. (Таким образом, он даже не отвечает на вопрос ОП!)
@BennettMcElwee О, я понимаю, о чем вы. Да, вы правы, что стилизованное тело как скрытое, вероятно, чище.
Если вы хотите распечатать только этот div, вы должны использовать инструкцию:
@media print{
*{display:none;}
#mydiv{display:block;}
}
Я взял контент с помощью JavaScript и создал окно, которое можно было распечатать вместо ...
Можете ли вы поделиться кодом, у него проблема с принятием css
Дайте любому элементу, который вы хотите распечатать, идентификатор
printMe.Включите этот скрипт в свой заголовок:
<script language = "javascript"> var gAutoPrint = true; function processPrint(){ if (document.getElementById != null){ var html = '<HTML>\n<HEAD>\n'; if (document.getElementsByTagName != null){ var headTags = document.getElementsByTagName("head"); if (headTags.length > 0) html += headTags[0].innerHTML; } html += '\n</HE' + 'AD>\n<BODY>\n'; var printReadyElem = document.getElementById("printMe"); if (printReadyElem != null) html += printReadyElem.innerHTML; else{ alert("Error, no contents."); return; } html += '\n</BO' + 'DY>\n</HT' + 'ML>'; var printWin = window.open("","processPrint"); printWin.document.open(); printWin.document.write(html); printWin.document.close(); if (gAutoPrint) printWin.print(); } else alert("Browser not supported."); } </script>Вызов функции
<a href = "javascript:void(processPrint());">Print</a>
Это хорошая работа. Но это слишком сложно и не будет работать должным образом в разных браузерах (особенно в старых браузерах). Предлагаю вам взглянуть на мое решение ниже.
Метод Сандро отлично работает.
Я настроил его, чтобы разрешить использование нескольких ссылок printMe, в частности, для использования на страницах с вкладками и расширении текста.
function processPrint(printMe){ <- здесь вызов переменной
var printReadyElem = document.getElementById(printMe); <- удалены кавычки вокруг printMe для запроса переменной
<a href = "javascript:void(processPrint('divID'));">Print</a> <- передача идентификатора div для печати в функцию для преобразования переменной printMe в идентификатор div. одинарные кавычки необходимы
С jQuery это так просто:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
Это довольно круто, хотя в Chrome оно отображается как заблокированное всплывающее окно.
Хитрость заключается в том, чтобы вызвать его по событию, создаваемому пользователем, например по щелчку мыши. вы также можете добавить после первой строки: if (! w) alert ('Пожалуйста, разрешите всплывающие окна');
Определенно добавляю это в свой инструментарий. Это быстрое и простое решение.
OP не хотел включать веб-стили, но я полагаю, мы можем добавить несколько тегов <style>
у кого-нибудь это работает на IE11? Он просто открывает окно, а затем сразу его закрывает. Хотя работает в Chrome, FF и сафари.
Спасибо, но у меня есть вопрос. Все объекты на странице действуют как слева направо. Есть ли способ предотвратить это? @romaninsh
Я потерял css при печати с этим, есть ли способ сохранить css?
@MoxetKhan, в этом посте есть решение с css vevlo.com/how-to-print-div-content-using-javascript
Это хорошо работает:
<style type = "text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
Обратите внимание, что это работает только с «видимостью». "display" этого не сделает. Проверено в FF3.
В Chrome это увеличивает количество печатаемого контента.
Вот общее решение с использованием Только CSS, которое, как я убедился, работает.
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Альтернативные подходы не так хороши. Использование display сложно, потому что, если какой-либо элемент имеет display:none, то ни один из его потомков не будет отображаться. Чтобы использовать его, вы должны изменить структуру своей страницы.
Использование visibility работает лучше, поскольку вы можете включить видимость для потомков. Однако невидимые элементы по-прежнему влияют на макет, поэтому я перемещаю section-to-print в верхний левый угол, чтобы он печатался правильно.
#section_to_print должен работать лучше с position:static; вместо position:absolute;Как лучше? Возможно, многостраничная печать?
это, безусловно, самый быстрый и чистый способ, мне интересно, почему этот ответ не получил наибольшее количество голосов -.-
Проблема, на которую следует обратить внимание при использовании этого решения, заключается в том, что в некоторых случаях вы можете распечатать тысячи пустых страниц. В моем случае я смог решить эту проблему с помощью некоторого дополнительного отображения: нет стиля для выбранных элементов, но, возможно, более общее решение достижимо с помощью некоторой комбинации также форсирования высоты, переполнения: нет и абсолютного позиционирования для всех div или чего-то еще.
Вы правы: если контент занимает несколько страниц, будьте осторожны с CSS. И протестируйте во всех возможных браузерах. : \
Это отличное начало, но у меня было две проблемы: во-первых, если какой-либо из родителей элемента установил свое собственное относительное / абсолютное позиционирование, содержимое все равно будет смещено, если вместо этого я не использовал position:fixed. Однако Chrome и Safari также будут обрезать контент, особенно после первой страницы. Итак, мой последний обходной путь состоял в том, чтобы установить для целевого а такжевсе его родители значение overflow:visible; position:absolute !important; top:0;left:0.
@Bennett благодарит за это отличное решение. Но при печати я получаю лишнюю пустую страницу. Как этого избежать?
@sanjeev Первый шаг: результаты тестирования в различных браузерах, чтобы увидеть, зависит ли проблема от браузера.
@Bennett Проблема не зависит от браузера. Я вижу это в Chrome, FF и IE.
@sanjeev Я создал минимальный Plunk, который у меня работает в Chrome (он распечатывает одну страницу). Может быть, вы могли бы создать Plunk, который демонстрирует проблему, и мы могли бы выяснить, что происходит.
Это гениальная работа, так рада, что она сработала как шарм всего за 2 минуты! Шикарная работа :)
Любопытно, почему раздел для печати должен присутствовать дважды?
@ dudeNumber4 Второе правило делает видимым раздел печати и его содержимое. Третье правило перемещает раздел печати в верхний левый угол. Вы можете реорганизовать правила, чтобы уменьшить дублирование селектора, но вместо этого вам придется дублировать объявление видимости.
@BennettMcElwee Нет, я имею в виду, почему второе правило должно дважды ссылаться на селектор Id?
@ dudeNumber4 #section-to-print соответствует самому разделу; #section-to-print * соответствует каждому подэлементу раздела. Таким образом, это правило просто делает раздел и все его содержимое видимым.
@BennettMcElwee: Что, если div раздела для печати находится в правом нижнем углу страницы? И позиция div является относительной, что означает, что она регулируется в соответствии с размером страницы?
@Vicky При печати он переместится в верхний левый угол.
Как отмечалось выше, это не работает на более сложных страницах с большим количеством контента. Если вам нужно полностью заблокировать отображение содержимого с помощью display: none, вам может быть лучше с решением js
Вы можете попробовать решение на JavaScript, но это не сработает, если ваш пользователь использует команду браузера «Печать».
Но он избегает стилей css из внешнего файла начальной загрузки.
Он все еще использует стили Bootstrap. Bootstrap устанавливает черный цвет текста при печати с помощью правила в print.less.
Вы можете объяснить, как я использую это на своей странице? У меня есть мастер-файл CSS
@JamesWierzba (Не уверен, что вы имеете в виду под основным файлом CSS) Поместите фрагмент CSS в свой файл CSS и измените #section-to-print на селектор, который выбирает раздел, который вы хотите распечатать.
Спустя 6 лет это все еще остается идеальным решением. Я использовал это в приложении AngularJS с window.print (), и у меня не было проблем.
Я попробовал это, и это сработало, но я не понимаю, как это сделать. Я не применял # section-to-print ни к чему в моем html. Как именно это может напечатать именно то, что мне нужно?
Вполне возможно, что бит, который вы хотели, уже имел visibility: visible, установленный каким-либо другим CSS.
Я чувствую, что body *:not(#section-to-print *) {visibility: hidden;} был бы более элегантным, поскольку не требовал бы перезаписи дважды. Однако для меня это, похоже, совсем не работает. Ну что ж.
Если в разделе для печати есть абсолютно размещенные элементы, вы должны сделать их скрытыми в разделе печати мультимедиа CSS, чтобы это решение работало. Компонент Material Design LiteTextField является примером этой проблемы.
Я немного улучшил его, если вы хотите скрыть печатные материалы. #section-to-print{ visibility:hidden; height:0px; } @media print { body * { visibility: hidden; } #section-to-print, #section-to-print * { visibility: visible; } #section-to-print { position: absolute; left: 0; top: 0; } }
@ShahAbazKhan Если вы хотите скрыть печатные материалы на экране, возможны более простые решения. Но это немного странно: это означает, что вы что-то увидите на экране, выберите «Печать», и на вашем принтере появится что-то совсем другое.
Это не удается, когда мы используем div с полосой прокрутки
@JeevanRoydsouza, можешь привести пример?
Когда у нас есть раздел для печати в @media print с .section-to-print, .section-to-print * {visibility: visible; } .section-to-print {позиция: фиксированная; слева: 0; верх: 0; дисплей: блок; ширина: авто; переполнение-y: прокрутка; } и внешняя печать css .section-to-print {height: 80%; переполнение-y: прокрутка; граница: сплошной серый 1px; }
Когда у нас есть раздел для печати, это div с полосой прокрутки, тогда полоса прокрутки не появляется на странице печати
Чтобы скрыть область печати, используйте: @media screen {# section-to-print {display: none; }}
Спасибо, это потрясающе
printDiv (divId): обобщенное решение для печати любого div на любой странице.
У меня была аналогичная проблема, но я хотел (а) иметь возможность распечатать всю страницу или (б) распечатать любую из нескольких конкретных областей. Мое решение, благодаря большей части вышеперечисленного, позволяет вам указать любой объект div для печати.
Ключевым моментом для этого решения является добавление соответствующего правила в таблицу стилей печатного носителя, чтобы запрошенный div (и его содержимое) был напечатан.
Сначала создайте необходимый print css, чтобы все подавить (но без конкретного правила, разрешающего элемент, который вы хотите распечатать).
<style type = "text/css" media = "print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Обратите внимание, что я добавил новые правила класса:
- noprintarea позволяет подавить печать элементов в вашем div - как содержимого, так и блока.
- noprintcontent позволяет подавить печать элементов в вашем div - контент подавляется, но выделенная область остается пустой.
- Распечатать позволяет вам иметь элементы, которые отображаются в печатной версии, но не на странице экрана. Обычно для стиля экрана у них будет "display: none".
Затем вставьте три функции JavaScript. Первый просто включает и выключает таблицу стилей для печатных материалов.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
Второй делает реальную работу, а третий потом убирает. Второй (printDiv) активирует таблицу стилей носителя для печати, затем добавляет новое правило, разрешающее печать нужного div, выдает печать, а затем добавляет задержку перед окончательной уборкой (в противном случае стили могут быть сброшены до того, как печать будет фактически выполнена. Выполнено.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS = "visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
Последние функции удаляют добавленное правило и снова устанавливают стиль печати на отключенный, чтобы можно было распечатать всю страницу.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
Единственное, что нужно сделать, - это добавить одну строку в процесс загрузки, чтобы стиль печати изначально был отключен, что позволяет печатать всю страницу.
<body onLoad='disableSheet(0,true)'>
Затем из любого места в документе вы можете распечатать div. Просто введите printDiv ("thedivid") с помощью кнопки или чего-то еще.
Большой плюс такого подхода - это общее решение для печати выбранного контента на странице. Он также позволяет использовать существующие стили для печатаемых элементов, включая содержащий div.
ПРИМЕЧАНИЕ. В моей реализации это должна быть первая таблица стилей. Измените ссылки листа (0) на соответствующий номер листа, если вам нужно сделать это позже в последовательности листов.
У меня есть лучшее решение с минимальным кодом.
Поместите свою печатную часть в div с таким идентификатором:
<div id = "printableArea">
<h1>Print me</h1>
</div>
<input type = "button" onclick = "printDiv('printableArea')" value = "print a div!" />
Затем добавьте событие, подобное onclick (как показано выше), и передайте идентификатор div, как я сделал выше.
Теперь давайте создадим действительно простой javascript:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
Обратите внимание, насколько это просто? Ни всплывающих окон, ни новых окон, ни сумасшедшего стиля, ни JS-библиотек, таких как jquery. Проблема с действительно сложными решениями (ответ несложный и не то, о чем я говорю) заключается в том, что они НИКОГДА не будут переводиться во всех браузерах! Если вы хотите изменить стили, сделайте, как показано в отмеченном ответе, добавив атрибут media к ссылке на таблицу стилей (media = "print").
Без пуха, легкий, просто работает.
@Kevin, я пробую это для формы, но она печатает пустую форму (без данных), и мне нужно, чтобы заполненная форма была распечатана перед отправкой
Это отлично работает в Firefox и Chrome. Почему-то IE зависает при открытии и записи содержимого.
@Kevin: Отличное решение .. Однако оно не захватывает цвета и стили фона? Он печатает только обычный текст. Возможны ли какие-либо модификации для получения цветов и стилей?
@asprin предупреждение! Это не беспорядок в коде. Использование innerHTML для уничтожения, а затем воссоздания всего тела подходит для простых страниц, но с более продвинутыми настройками (меню, слайд-шоу и т. д.) Он может стереть некоторые динамические поведения, добавленные другими скриптами.
Это решение не будет работать на любой сложной странице, где элементы в области печати зависят от стилей и / или положения родительских элементов. Если вы извлечете печатный div, он может выглядеть совершенно по-другому, потому что все родители теперь отсутствуют.
К сожалению, не работает в Chrome, если вы закроете окно предварительного просмотра печати и попытаетесь выполнить jQuery .click. Обидно, потому что код такой легкий.
@Kevin Большое спасибо. Это действительно решение моей проблемы. Не нужно возиться с моим кодом, отличный ответ! +1
Мне нравится этот подход, но я не хочу перезагружать весь дом только для печати. На сложной странице с «состоянием» это было бы очень сложно. Я был вдохновлен этим кодом и придумал альтернативу: github.com/mikeljames/printme
@mike Вы ничего не перезагружаете, это строго манипулирует DOM. Вы сохраняете разметку в переменной, распечатываете страницу и возвращаете ее. Я понимаю, что вы не решаетесь сделать это, но важно понимать, что загрузка не происходит. Вы просто манипулируете DOM
@KevinFlorida Когда я говорю «Перезагрузить», я, по сути, имею в виду перерисовку, дом работает медленно, использование CSS для скрытия элементов выполняется быстрее: stackoverflow.com/questions/2447309/…
@Christophe: Моя страница на ASP.NET очень тяжелая и содержит много динамического контента. Несмотря на это, функция печати работает отлично. Сама идея проста и гениальна, спасибо Кевину Флориде!
@BorisGappov - очень простой пример с одним событием щелчка, чтобы доказать мою точку зрения: jsfiddle.net/dc7voLzt Я скажу это еще раз: это не беспорядочный код! Проблема не в самом принте, а в восстановлении исходной страницы!
с этим решением, когда я нажимаю, чтобы распечатать страницу и закрывать окно предварительного просмотра, я не могу щелкнуть, чтобы снова напечатать, любая идея, почему print () работает только один раз? Я использую React с Redux.
@Kevin Я пробовал этот код, но у меня возникла одна проблема: разрывы страниц не работают при печати. У меня есть разрыв страницы после: всегда; в дочерних элементах print div, но print не имеет разрыва страницы :(
Привет, @KevinFlorida. Я попробовал ваш код, и он работает только один раз. после закрытия и повторного нажатия кнопки отображается ошибка. Я использую vuejs2 Uncaught TypeError: не удалось выполнить «содержит» на «Узле»: параметр 1 не относится к типу «Узел».
Если ваш html имеет тег select, он не отображает выбранный параметр во время печати.
Работает как шарм.
Что, если я хочу отправить URL-адрес в кнопке и распечатать URL-адрес в формате PDF? Это возможно? Это для страницы архива. Примечание: я не хочу перенаправлять на отправляемый URL.
В моем случае это не сработало. У меня есть форма, которую нужно распечатать, и я попробовал твой трюк. Но это дает мне некоторые ошибки, такие как: Cannot set property 'onclick' of null и Uncaught (in promise) Error: Not enough parameters. Кстати, я на AngularJS
Я использовал location.reload (); в последней строке, чтобы исправить проблему onclick, и таким образом, ответ будет полностью быстрым и удовлетворительным для меня, спасибо
Я перепробовал все варианты, этот работает в Chrome. Чтобы убедиться, что переключатель обратно работает, следует использовать location.reload ()
Большой простор для добавления стилей перед печатью и их последующего восстановления с помощью этого простого и понятного фрагмента кода. Прекрасно обрабатывает страницы, доставленные PHP. Может быть, поможет onfocus() location.reload(), когда диалог печати отменен.
Это быстрое и хорошее решение для страниц маленького и среднего размера .. молодец !!
Вы можете использовать это: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
Или используйте свойство css visibility:visible и visibility:hidden вместе с @media print{}
'display: none' скроет все вложенные 'display: block'. Это не решение.
Шаг 1. Напишите в теге заголовка следующий код JavaScript.
<script language = "javascript">
function PrintMe(DivID) {
var disp_setting = "toolbar=yes,location=no,";
disp_setting+ = "directories=yes,menubar=yes,";
disp_setting+ = "scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
docprint.document.write('<html xmlns = "http://www.w3.org/1999/xhtml" xml:lang = "en">');
docprint.document.write('<head><title>My Title</title>');
docprint.document.write('<style type = "text/css">body{ margin:0px;');
docprint.document.write('font-family:verdana,Arial;color:#000;');
docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
docprint.document.write('a{color:#000;text-decoration:none;} </style>');
docprint.document.write('</head><body onLoad = "self.print()"><center>');
docprint.document.write(content_vlue);
docprint.document.write('</center></body></html>');
docprint.document.close();
docprint.focus();
}
</script>
Шаг 2. Вызовите функцию PrintMe ('DivID') по событию onclick.
<input type = "button" name = "btnprint" value = "Print" onclick = "PrintMe('divid')"/>
<div id = "divid">
here is some text to print inside this div with an id 'divid'
</div>
Это тот самый! Использовал его для модального окна и галереи. После закрытия нет ошибок Javascript. Действительно полезно, особенно когда вы используете модальные окна, длина которых превышает одну страницу. Красиво завершает. Идеально подходит для людей, которые хотят распечатать в магазине.
Мне в целом не понравился ни один из этих ответов. Если у вас есть класс (скажем, printableArea) и он является непосредственным потомком body, вы можете сделать что-то вроде этого в своем CSS-файле print:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
Тем, кто ищет printableArea в другом месте, вам нужно убедиться, что показаны родительские объекты printableArea:
body > *:not(.parentDiv),
.parentDiv > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
Использование видимости может вызвать множество проблем с интервалом и пустых страниц. Это связано с тем, что видимость сохраняет пространство элементов, просто делает его скрытым, тогда как отображение удаляет его и позволяет другим элементам занимать его пространство.
Причина, по которой это решение работает, заключается в том, что вы не захватываете все элементы, а только непосредственных дочерних элементов тела и скрываете их. Другие решения ниже с отображением css скрывают все элементы, которые влияют на все внутри содержимого printableArea.
Я бы не стал предлагать javascript, поскольку вам понадобится кнопка печати, которую нажимает пользователь, а стандартные кнопки печати браузера не будут иметь такого же эффекта. Если вам действительно нужно это сделать, я бы сохранил html тела, удалил все ненужные элементы, распечатал, а затем добавил обратно html. Как уже упоминалось, я бы избежал этого, если бы вы могли, и использовал вариант CSS, как указано выше.
ПРИМЕЧАНИЕ. Вы можете добавить любой CSS в CSS для печати, используя встроенные стили:
<style type = "text/css">
@media print {
//styles here
}
</style>
Или, как я обычно использую, это тег ссылки:
<link rel = "stylesheet" type = "text/css" media = "print" href = "print.css" />
Что, если div, который вы хотите напечатать, не является «непосредственным потомком тела»? Я пытаюсь сделать это в vue.js .. Но при использовании принятого ответа у меня появляется много пустых страниц.
@svenema, вы можете использовать любой CSS, какой захотите. Это был просто пример.
хм, тем не менее, когда я пробую это, действительно нет дополнительных пустых страниц, но div printableArea также не отображается; Когда я использую этот код, у меня остается только 1 пустая пустая страница.
Я обнаружил, что это действительно так, потому что div printableArea не является прямым потомком тега body, когда я делаю его прямым потомком, ваше решение работает; однако в моем случае я не могу сделать printableArea прямым потомком. Это можно обойти?
тем не менее ... когда div printableArea является нет прямым потомком тега body, я получаю только пустую страницу. Не могли бы вы опубликовать полностью рабочий пример?
Если вы опубликуете свой пример в jsfiddle или в чем-то подобном, я могу помочь исправить.
Извините за задержку. Сайт не работал, когда у меня было время посмотреть, и я просто вернулся к этому. В основном вам нужно указать родительский элемент в вашем CSS. Что-то вроде jsfiddle.net/sn79fow1
Отличный материал, очень признателен! Я играл с ним несколько часов, изучая селекторы и псевдоклассы. Но я не смог понять, есть ли способ разместить printableArea в произвольном месте и по-прежнему печатать только этот конкретный класс.
Функция printDiv () срабатывала несколько раз, но в этом случае вы теряете все элементы привязки и входные значения. Итак, мое решение - создать div для всего, что называется «body_allin», и еще один, кроме первого, под названием «body_print».
Затем вы вызываете эту функцию:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
Эта строка может быть полезна, если вам нужен уникальный идентификатор: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');
@Kevin Флорида Если у вас есть несколько div с одним и тем же классом, вы можете использовать его следующим образом:
<div style = "display:none">
<div id = "modal-2" class = "printableArea">
<input type = "button" class = "printdiv-btn" value = "print a div!" />
</div>
</div>
я использовал внутренний тип контента Colorbox
$(document).on('click', '.printdiv-btn', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $('body').html();
var printArea = $this.parents('.printableArea').html();
$('body').html(printArea);
window.print();
$('body').html(originalContent);
});
В моем случае мне пришлось распечатать изображение внутри страницы. Когда я использовал голосование за решение, у меня была 1 пустая страница, а на другой - изображение. Надеюсь, это кому-то поможет.
Вот css, который я использовал:
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
Мой HTML:
<div id = "not-print" >
<header class = "row wrapper page-heading">
</header>
<div class = "wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id = "to-print" style = "display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
У меня было несколько изображений, каждое с кнопкой, и мне нужно было нажать кнопку, чтобы напечатать каждый div с изображением. Это решение работает, если я отключил кеш в своем браузере, а размер изображения не меняется в Chrome:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write('<scr' + 'ipt type = "text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
<div id = "printableArea">
<h1>Print me</h1>
</div>
<input type = "button" onclick = "printDiv('printableArea')" value = "print a div!" />
Я пробовал многие из предложенных решений, но ни одно из них не сработало идеально. Они либо теряют привязки CSS или JavaScript. Я нашел идеальное и простое решение, которое не теряет привязки CSS или JavaScript.
HTML:
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type = "text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
Это открытие и создание еще одного окна, которое не работает на Android. Работает только прямой window.print ().
Еще один подход, не затрагивающий текущую страницу, и он также сохраняет CSS во время печати. Здесь селектор должен быть конкретным селектором div, содержимое которого нам нужно распечатать.
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $('link');
var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth * 0.6);
printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
Здесь предоставлено некоторое время, чтобы показать, что к нему применяются внешние CSS.
Иногда для загрузки CSS требуется время, этот подход - это то, что я искал, чтобы перезагрузить страницу перед печатью. Спасибо
Лучший css для размещения пустого пространства по высоте:
@media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Я очень опаздываю на эту вечеринку, но хочу предложить еще один подход. Я написал крошечный модуль JavaScript под названием PrintElements для динамической печати частей веб-страницы.
Он работает путем перебора выбранных узловых элементов и для каждого узла проходит вверх по дереву DOM до элемента BODY. На каждом уровне, включая начальный (который является уровнем узла для печати), он прикрепляет класс маркера (pe-preserve-print) к текущему узлу. Затем присоединяет другой класс маркера (pe-no-print) ко всем братьям и сестрам текущего узла, но только если на них нет класса pe-preserve-print. В качестве третьего акта он также присоединяет другой класс к сохранившимся элементам-предкам pe-preserve-ancestor.
Очень простой дополнительный CSS-код, предназначенный только для печати, будет скрывать и отображать соответствующие элементы. Некоторые преимущества этого подхода заключаются в том, что все стили сохраняются, новое окно не открывается, нет необходимости перемещать множество элементов DOM и, как правило, он не вмешивается в исходный документ.
См. демонстрация или прочтите соответствующую статью для получения дополнительной информации.
Я нашел решение.
@media print {
.print-area {
background-color: white;
height: 100%;
width: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:1500;
visibility: visible;
}
@page{
size: portrait;
margin: 1cm;
}
/*IF print-area parent element is position:absolute*/
.ui-dialog,
.ui-dialog .ui-dialog-content{
position:unset !important;
visibility: hidden;
}
}
Лучший способ распечатать конкретный Div или любой элемент
printDiv("myDiv");
function printDiv(id){
var printContents = document.getElementById(id).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
основываясь на ответе @Kevin Florida, я сделал способ избежать отключения скрипта на текущей странице из-за перезаписи содержимого. Я использую другой файл под названием «printScreen.php» (или .html). Оберните все, что вы хотите напечатать, в div "printSource". А с помощью javascript откройте новое окно, которое вы создали ранее («printScreen.php»), затем возьмите содержимое в «printSource» верхнего окна.
Вот код.
Главное окно:
echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";
//add button or link to print
echo "<button id='btnPrint'>Print</button>";
<script>
$("#btnPrint").click(function(){
printDiv("printSource");
});
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
}
</script>
Это «printScreen.php» - другой файл для захвата содержимого для печати.
<head>
// write everything about style/script here (.css, .js)
</head>
<body id='mainBody'></body>
</html>
<script>
//get everything you want to print from top window
src = window.opener.document.getElementById("printSource").innerHTML;
//paste to "mainBody"
$("#mainBody").html(src);
window.print();
window.close();
</script>
Без клоунады CSS лучше всего работает HTML и чистый javascript с iframe. Затем просто щелкните текст, который хотите распечатать. Текущий пример для элементов id с текстовым содержимым;
html body:
<div id = "monitor" onclick = "idElementPrint()">text i want to print</div>
чистый javascript:
//or: monitor.textContent = "click me to print textual content";
const idElementPrint = () => {
let ifram = document.createElement("iframe");
ifram.style = "display:none";
document.body.appendChild(ifram);
pri = ifram.contentWindow;
pri.document.open();
pri.document.write(monitor.textContent);
pri.document.close();
pri.focus();
pri.print();
}