Question

我正在尝试使用打印选项保存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" );
});

Answer 1

为了检查问题所在，我修改了代码，以便将所有内容放入变量中，然后将其写入窗口。在您尝试打印窗口之前，document.write似乎无法呈现内容。相反，我更改了innerHTML的{{1}}，这似乎工作正常：

body

http://jsfiddle.net/hoqp8zxp/

更新以帮助您使用CSS

关于CSS，我认为存在一些问题：

新窗口位置为$("#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(); });（或类似的东西），因此相对路径不起作用。您应该使用绝对路径（about:blank而不是http://host/css/print.css）
由于样式表是异步加载的，因此在样式表完全加载后，您可能必须使用hack才能执行print命令。这样的事情：https://viget.com/inspire/js-201-run-a-function-when-a-stylesheet-finishes-loading 注意：你也可以使用样式标签加载样式

这是使用上面提到的黑客的更新代码（使用StackOverflow中的样式表）：

css/print.css

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

Answer 2

我使用setTimeOut来解决这个问题并且对我来说很好。我用我的解决方案修改了你的代码。

$("#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.close();
setTimeout(function () {
            printWindow.focus();
            printWindow.print();
             }, 1000);
});

打印窗口第一次不工作

2 个答案: