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

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

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

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

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

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

Ответы [ 27 ]

678 голосов
/ 12 апреля 2010

Вот общее решение, использующее только 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 в верхний левый угол, чтобы он печатался правильно.

218 голосов
/ 23 сентября 2011

У меня есть лучшее решение с минимальным кодом.

Поместите свою печатаемую часть в div с идентификатором, подобным этому: 

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

Затем добавьте событие, как онклик (как показано выше), и передайте идентификатор элемента 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").

Нет пуха, легкий, он просто работает.

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

Все ответы на данный момент довольно ошибочны - они либо включают добавление 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 ...

105 голосов
/ 06 ноября 2009

С jQuery это так просто: 

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
21 голосов
/ 22 января 2009

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

19 голосов
/ 04 января 2010

Это хорошо работает: 

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

Обратите внимание, что это работает только с "видимостью". «дисплей» не будет делать это. Протестировано в FF3.

13 голосов
/ 23 июля 2013

Мне не очень понравился ни один из этих ответов в целом. Если у вас есть класс (скажем, printableArea) и он является непосредственным потомком тела, то вы можете сделать что-то вроде этого в своем CSS для печати: 

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

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

Причина, по которой работает это решение, заключается в том, что вы не захватываете все элементы, только непосредственных детей тела и скрываете их. Другие решения ниже с display 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" />
8 голосов
/ 09 мая 2009

  1. Дайте любой элемент, который вы хотите напечатать id printMe.

  2. Включите этот скрипт в тег head: 

    <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>

  3. Вызов функции 

    <a href="javascript:void(processPrint());">Print</a>
6 голосов
/ 22 января 2009

хм ... используйте тип листа для печати ... например: 

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

print.css: 

div { display: none; }
#yourdiv { display: block; }
6 голосов
/ 09 апреля 2013

Шаг 1: напишите следующий тег javascript внутри тега head 

<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>
Страница:
...