окно печати не работает 1 раз

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

заранее спасибо

$("#btnPrint").click(function () { // alert("hi"); $(".accordion-content").css('display','block'); var printWindow = window.open('', '', 'height=400,width=1200'); var strin=""; printWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="css/print.css"/></head><body onload="window.focus();" onbeforeunload="window.close();">'); // alert($(".logoHolder").html()); printWindow.document.write($(".logoHolder").html()); $('input[class="subCheck"]:checked').each(function() { strin += $("#"+this.value).html()+"<br><br><br>"; }); printWindow.document.write(strin); // alert(); printWindow.document.write('</body></html>'); printWindow.print(); printWindow.close(); //$( "#btnPrint" ).trigger( "click" ); });

Related of "окно печати не работает 1 раз"

Чтобы проверить, где была проблема, я изменил ваш код, чтобы он помещал все в переменную, а затем записывал его в окно. Кажется, что document.write не отображает содержимое, прежде чем пытаться распечатать окно. Вместо этого я изменил innerHTML body , который, кажется, работает нормально:

 $("#btnPrint").click(function(){ $(".accordion-content").css('display','block'); var printWindow = window.open('', '', 'height=400,width=1200'); var html = ''+ '<html>'+ '<head>'+ '<link rel="stylesheet" type="text/css" href="css/print.css"/>'+ '</head>'+ '<body onload="window.focus();" onbeforeunload="window.close();">'+ $(".logoHolder").html(); $('input[class="subCheck"]:checked').each(function() { html += $("#"+this.value).html()+"<br><br><br>"; }); html += '</body></html>'; //printWindow.document.write(html); printWindow.document.body.innerHTML = html; printWindow.print(); });

http://jsfiddle.net/hoqp8zxp/

Обновите, чтобы помочь вам с вашим css

Что касается CSS, я считаю, что есть пара проблем:

Новое расположение окна about:blank (или что-то подобное), поэтому относительные пути не будут работать. Вы должны использовать абсолютный путь ( http://host/css/print.css вместо css/print.css )
Поскольку таблицы стилей загружаются асинхронно, вам может потребоваться использовать хак для выполнения команды печати после полной загрузки таблицы стилей. Что-то вроде этого: https://viget.com/inspire/js-201-run-a-function-when-a-stylesheet-finishes-loading Примечание. Вы также можете просто загрузить стили с помощью тега стиля

Это обновленный код с использованием взлома, упомянутого выше (с использованием таблицы стилей из StackOverflow):

 $("#btnPrint").click(function(){ $(".accordion-content").css('display','block'); var printWindow = window.open('', '', 'height=400,width=1200'); var cssFile = 'http://cdn.sstatic.net/stackoverflow/all.css?v=544053bd81fe';//Replace with your absolute path var html = ''+ '<html>'+ '<head>'+ '<link rel="stylesheet" type="text/css" href="'+cssFile+'"/>'+ '</head>'+ '<body onload="window.focus();" onbeforeunload="window.close();">'+ $(".logoHolder").html(); $('input[class="subCheck"]:checked').each(function() { html += $("#"+this.value).html()+"<br><br><br>"; }); html += '</body></html>'; //printWindow.document.write(html); printWindow.document.body.innerHTML = html; var img = document.createElement('img'); printWindow.document.body.appendChild(img); img.style.display = 'none'; img.onerror = function(){ printWindow.print(); }; img.src = cssFile; });

http://jsfiddle.net/hoqp8zxp/1/