我正在尝试使用打印选项保存PDF,但由于某种原因第一次它不起作用,它会出现一个空页面。我有 Google搜索并获得了一些解决方案,但没有运气。
I am trying to save a PDF using print option, but for some reason the 1st time it doesn't work, it comes up with an empty page. I have Googled and got some solutions, but no luck.
提前致谢
$("#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" ); });推荐答案
为了检查问题所在,我修改了你的代码所以它将所有内容放在一个变量中,然后将其写入窗口。看起来像 document.write 在尝试打印窗口之前不会呈现内容。相反,我更改了正文的 innerHTML ,这似乎工作正常:
In order to check where the problem was, I modified your code so it puts everything in a variable and then write it to the window. It seems like document.write doesn't render the contents before you try to print the window. Instead, I changed the innerHTML of the body, which seems to be working fine:
$("#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(); });jsfiddle/hoqp8zxp/
更新以帮助您处理CSS
关于CSS,我认为存在一些问题:
Regarding the CSS, I believe there are a couple of problems:
这是使用上面提到的黑客的更新代码(使用StackOverflow中的样式表):
This is the updated code using the hack mentioned above (using an stylesheet from StackOverflow):
$("#btnPrint").click(function(){ $(".accordion-content").css('display','block'); var printWindow = window.open('', '', 'height=400,width=1200'); var cssFile = 'cdn.sstatic/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; });jsfiddle/hoqp8zxp/1/
更多推荐
打印窗口第一次不工作
发布评论