打印窗口第一次不工作

编程入门行业动态更新时间:2024-10-26 00:21:36

本文介绍了打印窗口第一次不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

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

新窗口位置为 about：blank （或类似的东西）所以相对路径不起作用。您应该使用绝对路径（ http：//host/css/print.css 而不是 css / print.css ）

由于样式表是异步加载的，因此在样式表完全加载后，您可能必须使用hack才能执行print命令。这样的事情： https：// viget / inspire / js-201-run-a-function-when-a stylesheet-finishishes-loading 注意：您也可以使用样式标记加载样式

The new window location is about:blank (or something similar) so relative paths won't work. You should use an absolute path (host/css/print.css instead of css/print.css)

Since stylesheets load asynchronously, you might have to use a hack in order to execute the print command once the stylesheet is fully loaded. Something like this: viget/inspire/js-201-run-a-function-when-a-stylesheet-finishes-loading Note: You could also just load the styles using a style tag

这是使用上面提到的黑客的更新代码（使用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()+" "; }); 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/

更多推荐

打印窗口第一次不工作

本文发布于:2023-10-12 21:32:56，感谢您对本站的认可！

本文链接:https://www.elefans.com/category/jswz/34/1485959.html