Распечатать <div id = "printarea"> </div> только? - PullRequest
Новая
       33

Распечатать <div id = "printarea"> </div> только?

385 голосов
/ 22 января 2009

Как мне распечатать указанный div (не отключая вручную все остальное содержимое на странице)?

Я хочу избегать нового диалогового окна предварительного просмотра, поэтому создание нового окна с этим содержимым бесполезно.

Страница содержит пару таблиц, одна из которых содержит div, который я хочу напечатать - таблица стилизована под визуальные стили для Интернета, которые не должны отображаться при печати.

Ответы [ 27 ]

6 голосов
/ 10 октября 2013 
<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>

2 голосов
/ 19 июня 2009

Метод Сандро прекрасно работает.

Я настроил его, чтобы разрешить использование нескольких ссылок printMe, особенно для использования на страницах с вкладками и для расширения текста.

function processPrint(printMe){ <- вызов переменной здесь </p>

var printReadyElem = document.getElementById(printMe); <- убрал кавычки вокруг printMe для запроса переменной </p>

<a href="javascript:void(processPrint('divID'));">Print</a> <- передача идентификатора div для печати в функцию, чтобы превратить переменную printMe в идентификатор div. нужны одинарные кавычки </p>

2 голосов
/ 03 февраля 2009

Я взял контент с помощью JavaScript и создал окно, которое смог бы напечатать вместо ...

2 голосов
/ 22 января 2009

С помощью CSS 3 вы можете использовать следующее: 

body *:not(#printarea) {
    display: none;
}
2 голосов
/ 23 января 2011

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 - содержимое подавляется, но выделенная область остается пустой.
  • print позволяет вам иметь элементы, которые отображаются в печатной версии, но не на странице экрана. Они обычно имеют «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) на соответствующий номер листа, если вам нужно сделать это позже в последовательности листов.

2 голосов
/ 15 сентября 2015

@ Кевин Флорида Если у вас есть несколько 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);
});
2 голосов
/ 17 июня 2016

В моем случае мне пришлось распечатать изображение внутри страницы. Когда я использовал решение, проголосовавшее, у меня была 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>
1 голос
/ 10 марта 2019

Я очень опаздываю на эту вечеринку, но я бы хотел использовать еще один подход. Я написал крошечный модуль JavaScript под названием PrintElements для динамической печати частей веб-страницы.

Он работает путем итерации по выбранным элементам узла и для каждого узла проходит по дереву DOM до элемента BODY. На каждом уровне, включая начальный (который является уровнем узла для печати), он присоединяет класс маркера (pe-preserve-print) к текущему узлу. Затем присоединяет другой класс маркера (pe-no-print) ко всем братьям и сестрам текущего узла, но только если на них нет класса pe-preserve-print. В качестве третьего акта он также присоединяет другой класс к сохранившимся элементам предка pe-preserve-ancestor.

Простой простой дополнительный css только для печати скроет и покажет соответствующие элементы. Некоторые преимущества этого подхода состоят в том, что все стили сохраняются, он не открывает новое окно, нет необходимости перемещать множество элементов DOM и, как правило, неинвазивен в исходном документе.

См. Демоверсию или прочитайте соответствующую статью для получения более подробной информации .

1 голос
/ 19 апреля 2018

Наилучший 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;
  }
}
1 голос
/ 15 февраля 2018

Еще одно приближение, не затрагивающее текущую страницу, и оно также сохраняется при печати. Здесь селектор должен быть конкретным селектором 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.

Страница:
...