2012-10-10 10 views
2

на кнопке мыши, я использую window.print() из JavaScript для печати print_div содержания,Javascript Пустого содержимое HTML DIV после window.print()

Но из-за какой-то вопрос безопасности, я хотел, чтобы избежать печатей нескольких (например, используя Cntrl + P), поэтому я думал о том, чтобы очистить содержимое print_div, что пользователи не могут повторно распечатывать снова и снова.

Грубый код здесь,

document.getElementById("print_div").innerHTML = //Some contents to be printed on paper. 
window.print() 
document.getElementById("print_div").innerHTML = '' // Clearing old contents to avoid mis-use 

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

Может ли одно сказать меня, где я здесь делаю неправильно?

Примечание: Я использую Chrome: 22.0.1229.92 m проверить свой код & я хочу идти только хром.

+0

Если я открываю DevTools на эту страницу и введите: '. Document.getElementById ("Содержание") innerHTML = "Test"; window.print(); document.getElementById ("content"). innerHTML = ''; 'все будет работать, как ожидалось. Я получу предварительный просмотр с помощью «Тест», и когда я закрою диалоговое окно для печати, '# content' div будет пустым. 'window.print()' похоже, не является асинхронным. –

+0

Yeh..и работает отлично на devtools, но не в фактическом коде. BTW пытаюсь очистить это, используя setTimeOut Его странно, но работаю для меня .. :) –

ответ

1

Вы печатаете в print_div, и на следующем этапе вы очищаете то же самое. Поэтому он показывает пустой. Вы можете хранить данные печати в переменной. Затем отобразите его в print_div, и вы можете очистить переменную.

var print = ""; 
print += "<p>Something </p><br/>"; 
print += "<table><tr><td>Something</td><td>Something</td></tr> 
       <tr><td>Something</td><td>Something</td></tr> </table>"; 
document.getElementById("print_div").innerHTML = print; 
print = ""; 

что-то вроде этого. Установите этот javascript на кнопку onsubmit.

+1

Я не думаю, что ваше решение имеет смысл. После удаления переменной 'print'' document.getElementById ("print_div") 'все равно будет содержать данные, которые все еще можно распечатать. Мы хотим помешать пользователю печатать несколько раз здесь. –

2

Вы можете использовать метод setTimeout и попробовать его.

setTimeout("your code or function etc",mili seconds) 

setTimeout("document.getElementById('print_div').innerHTML = ''",5000); 
+0

Yup ...это то, что я сделал сейчас. Спасибо за тонну ... :) –

+1

Функция SetTimeout ждет 5 секунд после ее четкого вывода на печать. В вашем коде печать div очищена, не дожидаясь печати. – Hkachhia

0

Я бы не пойти на SetTimeout, он будет работать, только если пользователь сразу comfirms печать, которую вы не можете предположить, слепо ..

Я хотел бы сделать что-то вроде следующего:

var html = "<html><head></head><body>" + $("print_div").html() + "</body></html>"; 
var newWindow= window.open("", "PrintWindow", 
"width=100,height=50,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes"); 
newWindow.document.writeln(html); 
newWindow.document.close(); 
newWindow.focus(); 
newWindow.print(); 
newWindow.close(); 

а затем выполнить очистку

$('print_div').clear(); 
2

Это потому, что окно печати не было загружено.

var showPrintWindow = function (context) { 
     var printWindow = window.open('', ''); 
     var doc = printWindow.document; 
     doc.write("<html><head>"); 
     doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />"); 
     doc.write("</head><body>"); 
     doc.write(context); 
     doc.write("</body></html>"); 
     doc.close(); 

     function show() { 
      if (doc.readyState === "complete") { 
       printWindow.focus(); 
       printWindow.print(); 
       printWindow.close(); 
      } else { 
       setTimeout(show, 100); 
      } 
     }; 
     show(); 
    }; 
-1
setTimeout(function(){printWindow.document.close(); 
printWindow.print();}, 500); 

он будет работать

+0

Пожалуйста, отредактируйте с дополнительной информацией. Только код и «попробуйте» ответы не приветствуются, поскольку они не содержат содержимого, доступного для поиска, и не объясняют, почему кто-то должен «попробовать это». Мы прилагаем усилия, чтобы стать источником знаний. – abarisone

1

была аналогичная проблема с вашими в Chrome, он показывает пустую страницу в режиме предварительного просмотра. Пробовал использовать setTimeout, но он не работал. То, что работало, было window.onload.

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

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

JavaScript:

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; 
    } 
Смежные вопросы