Как распечатать указанный div (без ручного отключения всего другого содержимого на странице)?
Я хочу избежать нового диалогового окна предварительного просмотра, поэтому создание нового окна с этим контентом не является полезным.
Страница содержит пару таблиц, одна из которых содержит div, который я хочу напечатать, - таблица стилируется с визуальными стилями для Интернета, которые не должны отображаться в печати.
Вот общее решение, используя 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 в верхнем левом углу, чтобы он правильно печатался.
У меня есть лучшее решение с минимальным кодом.
Поместите свою часть для печати внутри div с таким идентификатором:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
Затем добавьте событие, подобное onclick (как показано выше), и передайте id 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" ).
Нет пуха, легкий, он просто работает.
Все ответы до сих пор довольно ошибочны - они либо включают в себя добавление 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 немного...
С jQuery это так просто:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
Не могли бы вы использовать таблицу стилей печати и использовать CSS для упорядочения содержимого, которое вы хотели распечатать? Прочитайте эту статью для большего количества указателей.
Это хорошо работает:
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
Обратите внимание, что это работает только с "видимостью". "display" не будет делать этого. Протестировано в FF3.
Мне не понравился ни один из этих ответов в целом. Если у вас есть класс (скажем, printableArea), и у вас это как непосредственный ребенок тела, то вы можете сделать что-то подобное в своем печатном CSS:
body > *: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" />
Дайте любой элемент, который вы хотите распечатать id printMe.
Включите этот script в свой тег:
<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>
hm... используйте тип стили для печати... например:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { 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>
<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>
Лучший способ - использовать css media="print"
Следующий код действительно потрясающий и работающий.
<style media="print" type="text/css">
@media print
{
body * { visibility: hidden; }
#PrintDiv * { visibility: visible; }
#PrintDiv { position: absolute; top: 40px; left: 30px; }
}
</style>
Этот код работает. Я тестировал это в Firefox 3.5.15
С помощью CSS 3 вы можете использовать следующее:
body *:not(#printarea) {
display: none;
}
Я взял содержимое с помощью JavaScript и создал окно, которое я мог бы распечатать вместо...
Песочный метод отлично работает.
Я настроил его, чтобы разрешить несколько ссылок printMe, особенно для использования на вкладках и расширении текста.
function processPrint(printMe){ < - вызов переменной здесь
var printReadyElem = document.getElementById(printMe); < - удалили кавычки вокруг printMe, чтобы запросить переменную
<a href="javascript:void(processPrint('divID'));">Print</a> < - передача идентификатора div, который будет напечатан на функции, чтобы превратить переменную printMe в идентификатор div. нужны одиночные кавычки
printDiv (divId): обобщенное решение для печати любого div на любой странице.
У меня была аналогичная проблема, но я хотел (а) иметь возможность распечатывать всю страницу или (б) печатать любую из нескольких конкретных областей. Мое решение, благодаря большей части вышесказанного, позволяет указать любой объект div, который нужно распечатать.
Ключом для этого решения является добавление соответствующего правила в таблицу стилей печати, чтобы напечатать запрошенный div (и его содержимое).
Сначала создайте необходимый css для печати, чтобы подавить все (но без специального правила, чтобы разрешить элемент, который вы хотите распечатать).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Обратите внимание, что я добавил новые правила класса:
Затем вставьте три функции JavaScript. Первый просто включает и отключает таблицу стилей печати.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
Вторая делает настоящую работу, а третья - потом. Второй (printDiv) активирует таблицу стилей печати, затем добавляет новое правило, чтобы разрешить печать требуемого div, выдает печать, а затем добавляет задержку перед окончательной ведением домашнего хозяйства (иначе стили могут быть reset до печати на самом деле сделано.)
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);
}
Единственное, что нужно сделать, это добавить одну строку в обработку onload, чтобы исходный стиль печати был отключен, что позволяет печатать всю страницу.
<body onLoad='disableSheet(0,true)'>
Затем из любого места вашего документа вы можете распечатать div. Просто выпустите printDiv ( "thedivid" ) с кнопки или что угодно.
Большим плюсом для этого подхода является общее решение для печати выбранного контента на странице. Он также позволяет использовать существующие стили для напечатанных элементов, включая содержащий div.
ПРИМЕЧАНИЕ. В моей реализации это должна быть первая таблица стилей. Измените ссылки листа (0) на соответствующий номер листа, если вам нужно сделать это позже в последовательности листов.
@Кевин Флорида Если у вас несколько div с одним классом, вы можете использовать его следующим образом:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
i использовал внутренний тип содержимого 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>
Используйте специальный лист стилей для печати
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
а затем добавить класс, т.е. "noprint" для каждого тега, содержимое которого вы не хотите печатать.
В CSS используйте
.noprint {
display: none;
}
Вы можете использовать отдельный стиль CSS, который отключает любое другое содержимое, кроме одного с идентификатором "printarea".
Подробнее см. Дизайн CSS: переход к печати для дальнейшего объяснения и примеров.
Если вы хотите распечатать этот div, вы должны использовать инструкцию:
@media print{
*{display:none;}
#mydiv{display:block;}
}
Функция 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";
}
У меня было несколько изображений с каждой кнопкой, и вам нужно было щелкнуть по кнопке, чтобы распечатать каждый 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();
}
Еще один вопрос, не влияющий на текущую страницу, а также сохранение 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 для размещения пустой высоты:
@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, и, как правило, он неинвазивен с вашим исходным документом.
Смотрите демо, или прочитайте соответствующую статью для получения дополнительной информации.
Вы можете использовать это: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
Или используйте свойство visibility:visible и visibility:hidden css вместе с @media print{}
'display: none' скроет весь вложенный 'display: block'. Это не решение.
Я нашел решение.
@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;
}
}