2016-10-25 4 views
2

У меня есть веб-страница, которая использует bPopUp, чтобы выставить модальное окно с помощью jQuery.Как распечатать содержимое всплывающего окна с помощью javascript?

Содержимое этого окна - именно то, что я хотел бы распечатать (и ничего больше на главной странице).

Я попытался связать кнопку во всплывающем окне, чтобы выполнить команду window.print();, но это просто печатает всю страницу, отображающую всплывающее окно, скрывающее остальную часть страницы.

Кто-нибудь знает, как я могу распечатать только содержимое всплывающего окна и ничего больше?

Благодаря

+2

'console.log ($ (" # popup "). Html())' –

+0

@SulthanAllaudeen извиняется за мое незнание, но это отправит содержимое на принтер? Или просто на «консоли» в нижней части страницы? Спасибо –

+0

jQuery 'html()': Получает содержимое HTML первого элемента в наборе согласованных элементов или задает содержимое HTML каждого элемента, соответствующего друг другу. См. Больше: http://api.jquery.com/html/ –

ответ

2

Образец HTMP

<div id='DivIdToPrint'> 
    <p>This is a Popup which needs to be printed.</p> 
</div> 

<div> 
    <p>Do not print.</p> 
</div> 

<input type='button' id='btn' value='Print' onclick='printDiv();'> 

Javascript

function printDiv() 
{ 
var divToPrint=document.getElementById('DivIdToPrint'); 
var newWin=window.open('','Print-Window'); 
newWin.document.open(); 
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>'); 
newWin.document.close(); 
setTimeout(function(){newWin.close();},10); 
} 

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

+0

Спасибо за ответ. Мне удалось заставить его работать. Хотя без форматирования, как вы объяснили. Правильно ли я думаю, что нет способа сохранить формирование? Возможно, загрузите соответствующий файл css в новое окно или что-то еще? Еще раз спасибо? –

+0

мы можем предотвратить формат, если мы можем загрузить файл css. Придется проверить его. –

+0

Хорошо, спасибо. Я использую Wordpress, если это имеет значение? Еще раз спасибо за вашу помощь :-) –