Только печать?

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



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



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

624   26  

26 ответов:

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

617  
2013-08-25 06:31:33

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

поместите печатную часть внутри 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. Проблема с действительно сложными решениями (the ответ не сложный и не то, что я имею в виду) является тот факт, что он никогда не будет переводить во всех браузерах, когда-либо! Если вы хотите изменить стили, сделайте так, как показано в проверенном ответе, добавив атрибут media в ссылку таблицы стилей (media="print").

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

209  
2011-09-23 20:37:23

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

116  
2009-01-22 14:28:28

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

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
102  
2009-11-06 14:57:54

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

21  
2009-01-22 14:12:20

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

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

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

19  
2010-01-04 21:18:34

мне не очень понравился ни один из этих ответов в целом. Если у вас есть класс (скажем, printableArea) и есть это как непосредственный ребенок тела, то вы можете сделать что-то вроде этого в своем Print 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" />
12  
2017-09-25 21:00:39

  1. дайте любой элемент, который вы хотите напечатать идентификатор 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>
7  
2011-11-14 18:06:40

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

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

печати.css:

div { display: none; }
#yourdiv { display: block; }
6  
2009-01-22 14:13:15 
<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>

6  
2015-10-07 19:28:22

Шаг 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>
6  
2017-09-22 19:49:36

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

body *:not(#printarea) {
    display: none;
}
2  
2009-01-22 14:14:31

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

2  
2009-02-03 15:06:46

метод Сандро отлично работает.

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

function processPrint(printMe){

var printReadyElem = document.getElementById(printMe);

<a href="javascript:void(processPrint('divID'));">Print</a>

2  
2009-06-19 22:58:57

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>

обратите внимание, что я добавил новые правила класс:

  • 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);
}

единственное, что нужно сделать, это добавить одну строку в onload обработка таким образом, что стиль печати изначально отключен, что позволяет печатать всю страницу. 

<body onLoad='disableSheet(0,true)'>

затем, из любого места в документе, вы можете распечатать div. Просто выдайте printDiv ("thedivid") с кнопки или что-то еще.

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

Примечание: In моя реализация, это должна быть первая таблица стилей. Измените ссылки на лист (0) на соответствующий номер листа, Если вам нужно сделать это позже в последовательности листов.

2  
2011-01-23 05:41:24

@Kevin Florida Если у вас есть несколько дивов с одним и тем же классом, вы можете использовать его следующим образом:

 <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  
2015-09-15 11:19:09

в моем случае я должен был напечатать изображение внутри страницы. Когда я использовал решение проголосовал, у меня была 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>
2  
2016-06-17 17:18:10

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

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

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

в CSS использовать 

.noprint {
  display: none;
}
1  
2009-01-22 14:14:11

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

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
1  
2011-11-14 18:05:21

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

}
1  
2014-02-27 19:47:42

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

посмотреть CSS дизайн: собирается печатать для дальнейшего объяснения и примеры.

1  
2014-09-23 08:20:41

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

еще один подход, не затрагивая текущую страницу, и он также сохраняет 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.

1  
2018-02-15 07:22:13

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

вы можете использовать это: 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{}

': не' буду скрывать отображение всех вложенных 'блоков'. Это не решение проблемы.
0  
2013-04-05 16:21:42

лучший 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;
  }
}
0  
2018-04-19 11:20:53

Comments

    Ничего не найдено.
Click here to cancel reply.