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

Question

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

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

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

Answer 1

Я попробовал многие из предоставленных решений. Ни одно из них не работало идеально. Они либо теряют привязки 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();
    }

Answer 2

У меня было несколько изображений, каждое с кнопкой, и мне нужно было нажать на кнопку, чтобы напечатать каждый 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!" />

Answer 3

Функция 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";

}

Answer 4

Используйте специальную таблицу стилей для печати

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

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

В CSS используйте

.noprint {
  display: none;
}

Answer 5

Вы можете использовать отдельный стиль CSS, который отключает любой другой контент, кроме контента с идентификатором "printarea".

См. CSS Design: Going to Print для дальнейшего объяснения и примеров.

Answer 6

Если вы хотите распечатать этот div, вы должны использовать инструкцию:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

Answer 7

Вы можете использовать это: 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». Это не решение.