Печатать только <div id = «printarea»> </ div>?

444

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

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

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

javascript  css  printing  dhtml 
— noesgard
источник
1
stackoverflow.com/questions/2255291/… эта ссылка отлично работает
— Джинна Балу

Ответы:

793

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

— Беннет МакЭлви
источник
21
это, безусловно, самый быстрый и чистый способ, я удивляюсь, почему этот ответ не набрал наибольшее количество голосов.
— Дани Халифе
34
Проблема, на которую стоит обратить внимание при использовании этого решения, заключается в том, что в некоторых случаях вы можете печатать тысячи пустых страниц. В моем случае я смог решить эту проблему с помощью некоторого дополнительного дисплея: нет стилей для выбранных элементов, но, возможно, более общее решение достижимо с помощью некоторой комбинации также форсирования высоты, переполнения: нет и абсолютного позиционирования для всех элементов div или чего-либо еще.
— Малкольм МакЛауд
5
Это отличное начало, но у меня были две проблемы: во-первых, если какой-либо из родителей элемента установил свое собственное относительное / абсолютное позиционирование, контент все равно будет смещен, если я не буду использовать position:fixedвместо этого. Однако Chrome и Safari также будут обрезать контент, особенно после первой страницы. Так что мой окончательный обходной путь был установлен как цель и всех родителей кoverflow:visible; position:absolute !important; top:0;left:0
— natevw
1
@ dudeNumber4 #section-to-printсоответствует самому разделу; #section-to-print *соответствует каждому подэлементу раздела. Так что это правило просто делает раздел и все его содержимое видимыми.
— Беннет МакЭлви
3
Вы можете попробовать решение JavaScript, но оно не будет работать, если ваш пользователь использует команду печати браузера.
— Беннет МакЭлви,
243

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

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

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

— Кевин Флорида
источник
@Kevin Я пробую это для формы, но она печатает пустую форму (без данных), и мне нужно заполненную форму для печати перед отправкой
— Arif
98
@ asprin предупреждение! Это не беспорядочный код. Использование innerHTML для удаления, а затем воссоздания всего тела хорошо для простых страниц, но с более продвинутыми настройками (меню, слайд-шоу и т. Д.) Может стереть некоторые динамические поведения, добавленные другими сценариями.
— Кристоф
17
Это решение не будет работать на любой сложной странице, где элементы в области печати зависят от стилей и / или положения родительских элементов. Если вы извлечете печатный div, он может выглядеть совершенно иначе, потому что все родители теперь отсутствуют.
— Андрей Волгин
1
К сожалению, не очень хорошо работает в Chrome, если вы закроете окно предварительного просмотра, а затем попытаетесь сделать jQuery .click. Обидно, потому что код такой легкий.
— rybo111
3
@BorisGappov очень простой пример с одним событием клика, чтобы доказать мою точку зрения: jsfiddle.net/dc7voLzt Я скажу еще раз: это не беспорядок код! Проблема не в самой печати, а в восстановлении исходной страницы!
— Кристоф
121

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

— Greg
источник
Я думаю, что вы правы, но как мне убить стилизацию таблицы, окружающей div (если это возможно, удалить стилизацию - я могу распечатать таблицу и довольно легко исключить остальное содержимое
— noesgard
Я использую Javascript для получения необходимого контента и CSS, как указано выше
— noesgard
9
Я предпочитаю использовать семантический HTML. Форматирование печати в идеале должно выполняться CSS. Смотрите мой ответ, чтобы узнать, как это сделать: stackoverflow.com/questions/468881/…
— Беннет МакЭлви,
Согласитесь с Беннеттом, использование видимости вместо дисплея - намного более чистое решение
— guigouz
Ниже я нашел очень простое решение в этой теме, которое, я думаю, лучше подойдет потребностям автора. Он не зависит от таблицы стилей печати, может быть переработан по всему сайту и невероятно легок.
— Кевин Флорида
108

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

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
— romaninsh
источник
3
Это довольно круто, хотя и отображается в Chrome как заблокированное всплывающее окно.
— Рафи Якоби
8
Хитрость заключается в том, чтобы вызывать его при сгенерированном пользователем событии, например при щелчке мышью. Вы также можете добавить после первой строки: if (! w) alert («Пожалуйста, включите всплывающие окна»);
— Романиньш
1
кто-нибудь получил это работает на IE11? Он просто открывает окно, а затем сразу же закрывает его. Работает в Chrome, FF и Safari.
— greatwitenorth
3
Я потерял CSS при печати с этим, есть ли способ сохранить CSS?
— Моксет Хан
2
@MoxetKhan, этот пост имеет решение css vevlo.com/how-to-print-div-content-using-javascript
— lakesare
22

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

— Пол Диксон
источник
У меня есть таблица стилей для печати - я стараюсь избегать добавления правила стиля ко всему другому содержимому ...
— noesgard
У меня есть таблица со стилем, которая связывается с рассматриваемым div. Если я установлю таблицу для отображения: none - могу ли я по-прежнему отображать div?
— Noesgard
Я думаю, что да, и вы можете попробовать пометить правило как! Важно его повысить!
— Пол Диксон
если таблица не отображается, это не имеет значения, даже если для div установлено значение «display: awesome;». Родитель скрыт, как и дети. Это ситуация, когда вам нужна таблица, или это просто для макета страницы?
— roborourke
"Бум, выстрел в голову!" по разметке стола. = |
— ANeves
19

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

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

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

— Кристиан Майоли М.
источник
15

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

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

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

Для тех, кто ищет printableArea в другом месте, вам нужно убедиться, что отображаются родительские объекты printableArea:

body > *:not(.parentDiv),
.parentDiv > *: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" />
— fanfavorite
источник
Что если div, который вы хотите напечатать, не является «непосредственным потомком тела»? Я пытаюсь сделать это в vue.js .. Но я получаю много пустых страниц при использовании принятого ответа.
— Свенема
@svenema, вы можете использовать любой CSS, который вы хотите. Это был просто пример.
— Фан-фаворит
хм, тем не менее, когда я пытаюсь это сделать, действительно нет никаких дополнительных пустых страниц, но div printableArea также не отображается; У меня просто есть 1 пустая пустая страница, когда я использую этот код.
— Свенема
Я обнаружил, что это действительно потому, что div printableArea не является прямым потомком тега body, когда я делаю это прямым потомком, ваше решение работает; однако в моем случае я не могу сделать область печати прямым потомком. Есть ли способ обойти это?
— Свенема
@svenema, пожалуйста, смотрите мои изменения выше.
— Фан-фаворит
8

  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>
— Джейсон Планк
источник
Это хорошая работа. Но это слишком сложно и не будет работать должным образом кросс-браузер (особенно в старых браузерах). Я предлагаю вам взглянуть на мое решение ниже.
— Кевин Флорида
6

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

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

print.css:

div { display: none; }
#yourdiv { display: block; }
— Андреас Нидермаир
источник
Это не будет работать, если документ не основан на DIV или #yourdiv также включает дополнительные DIV.
— Гамбо
#yourdiv * {display: ...}, если вы разместите это в верхней части страницы и у вас будет обновленный браузер, вы можете работать с большим количеством селекторов, чтобы скрыть не div
— Andreas Niedermair
"#yourdiv * {display: ...}" - что должно быть ... без нарушения макета?
— Грег
Это будет отображать встроенные элементы также как элементы блока. Но «#yourdiv, #yourdiv div {display: block}» сделает это.
— Гамбо
@dittodhole - подумай минутку. Что вы можете добавить туда, чтобы не нарушить макет в #yourdiv?
— Грег
6 
<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
Выглядит красиво, но вы теряете все привязки javascript и прочее после печати
— Julien
1
Это печать без CSS.
— Моксет Хан
6

Шаг 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>
— Хардик Такер
источник
Это тот самый! Использовал его для модальных и галерей. Нет ошибок Javascript после закрытия. Действительно полезно, особенно когда вы используете модалы, которые длиннее одной страницы. Красиво оборачивает это. Идеально подходит для людей, которые хотят печатать в магазине.
— TheWeeezel
2

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

body *:not(#printarea) {
    display: none;
}
— гумбо
источник
Я не могу использовать это, я боюсь ... (исправьте меня, если неправильно), страница, над которой я работаю, является asp.net 1.1 / DHTML
— noesgard
От браузера зависит, доступен ли селектор: not () или нет.
— Гамбо
Ну, тогда мое предложение - просто взгляд в будущее ... Нет, серьезно. Я только что упомянул это для полноты картины. Я знаю, что сейчас это невозможно. К несчастью.
— Гамбо
Вы можете использовать jQuery и этот селектор, который (я думаю) будет работать в IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
— Дэвид Хегги
2
это скроет всех потомков #printarea, поскольку они сопоставляются *: not (#printarea). Таким образом, в основном вы получите пустой контейнер.
— Цитофу
2

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

— noesgard
источник
Можете ли вы поделиться кодом, у него есть проблема принятия CSS
— Moxet Khan
2

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

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

function processPrint(printMe){ <- здесь вызывается переменная

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

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

2

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

— DrDave
источник
2

@Kevin Флорида Если у вас есть несколько 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

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

Лучший 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;
  }
}
— TRI ÂN
источник
2

Лучший способ напечатать определенный Div или любой элемент

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}
— Mahetab
источник
1

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

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

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

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

.noprint {
  display: none;
}
— Xn0vv3r
источник
1

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

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
— Джейсон Планк
источник
1

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

}
— pmrotule
источник
Эта строка может быть полезна, если вам нужен уникальный идентификатор: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');
— pmrotule
1

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

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

— Kosi2801
источник
Обновлена ​​ссылка на новое местоположение. Комментарий вместо понижения был бы хорош.
— Kosi2801
1

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

Еще один подход, не влияющий на текущую страницу, и он также сохраняется при печати. Здесь селектор должен быть конкретным селектором 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 иногда требуется время, поэтому я хотел перезагрузить страницу перед печатью. Спасибо
— Арпит Шривастава
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();
    }
— BibanCS
источник
Это открытие и создание другого окна, которое не работает на Android. Работает только прямой window.print ().
— Мерв
1

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

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

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

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

— Андраш Шепешази
источник
0

Я нашел решение.

@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;
    }
}
— user2573099
источник
0

Основываясь на ответе @Kevin Флорида, я сделал способ избежать отключения сценария на текущей странице из-за перезаписи содержимого. Я использую другой файл с именем "printScreen.php" (или .html). Оберните все, что вы хотите напечатать в div "printSource". А с помощью javascript откройте новое окно, которое вы создали ранее («printScreen.php»), затем захватите содержимое в «printSource» верхнего окна.

Вот код

Главное окно: 

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Это «printScreen.php» - другой файл для захвата содержимого для печати 

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>
— QeiNui
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.