javascript windows.print 导致空页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29188907/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
windows.print results in empty page
提问by MoritzLost
So I'm trying to add a print button to an html page. Most of the page is not supposed to appear in print, so I hide everything in print and then reveal only the one div that is supposed to be printed (or this is what I'm trying to do). But when I try the print button out, the resulting page is completely empty. The html structure of the page looks like this:
所以我正在尝试向 html 页面添加一个打印按钮。大部分页面不应该出现在打印中，所以我隐藏了打印中的所有内容，然后只显示应该打印的一个 div（或者这就是我想要做的）。但是当我尝试打印按钮时，结果页面完全是空的。页面的 html 结构如下所示：
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
And here is the CSS that is supposed to hide everything except the div with the id "results_page" (of course the buttons in that div are also supposed to be hidden in print).
这是应该隐藏除 id 为“results_page”的 div 之外的所有内容的 CSS（当然，该 div 中的按钮也应该在打印时隐藏）。
@media print {
*{
background-color:transparent;
}
div#fullpage .section, .print_trigger, .unprintable{
display:none;
}
div#fullpage #results_page{
display:block;
}
#result_image,
#result_text {
float: none;
margin: 50px;
}
}
The javascript function is pretty simple, depending on what button the user clicks it adds the "unprintable" class to the picture element and then prints the document (I'm not sure if the html, the css or the js are the culprit here, this is why I include all of this in the question):
javascript 函数非常简单，取决于用户单击哪个按钮，它会将“不可打印”类添加到图片元素，然后打印文档（我不确定 html、css 或 js 是否是这里的罪魁祸首，这就是为什么我将所有这些都包含在问题中的原因）：
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
So, given all of this, what could be causing the empty page my printer spits out?
那么，考虑到所有这些，什么可能导致我的打印机吐出空白页？
采纳答案by MoritzLost
To anyone having the same problem: I couldn't figure out what was causing it, but I could get it done using the window.frameapproach elaborated in this answer.
对于有同样问题的任何人：我无法弄清楚是什么导致了它，但我可以使用本答案中window.frame阐述的方法完成它。
回答by javaBean007
For anyone who is having this problem(especially if using bootstrap), it may be a CSS issue and NOT a javascript issue.
对于遇到此问题的任何人（尤其是使用引导程序时），这可能是 CSS 问题而不是 javascript 问题。
My dilemma was that we had a print button towards the top of the page that called "window.print()" function. And it resulted in a blank print preview page. The weird part was that is was working completely fine several weeks ago.
我的困境是我们在页面顶部有一个打印按钮，称为“window.print()”函数。这导致了一个空白的打印预览页面。奇怪的是几周前它完全正常工作。
So first, like many threads have mentioned, check that this is not a javascript issue indeed. My call to window.print() did truly bring up the print preview window(meaning we weren't accidentally overriding the print function with another variable somewhere.)
所以首先，就像许多线程提到的那样，检查这确实不是 javascript 问题。我对 window.print() 的调用确实打开了打印预览窗口（这意味着我们没有意外地在某处用另一个变量覆盖了打印函数。）
The issue was with Bootstrap's container and container-fluids classes not displaying for print modes. Apparently these classes are being told to be not displayable on print styles(presumably from bootstrap style sheet).
问题在于 Bootstrap 的容器和容器流体类未在打印模式下显示。显然，这些类被告知不能在打印样式上显示（大概来自引导样式表）。
All I had to do was add the following CSS print rules:
我所要做的就是添加以下 CSS 打印规则：
.container, .container-fluid {
width: auto;
display: block!important;
}
and it displayed again! This is also hinted at through bootstrap documentation here: http://getbootstrap.com/getting-started/#support-printing
它再次显示！这也通过此处的引导程序文档暗示：http: //getbootstrap.com/getting-started/#support-printing
So in a nutshell, check if the CSS is the issue, and stop blaming that poor Javascript.
因此，简而言之，请检查 CSS 是否是问题所在，并停止指责糟糕的 Javascript。
回答by verheesj
Here you go:
干得好：
function print_stadtarchiv(print_picture) {
if(!print_picture) $('#result_image').addClass('unprintable');
return window.print();
}
It also looks like you have no DOCTYPE or html tags... This is likely to cause all sorts of rendering/not-rendering based issues.
看起来您也没有 DOCTYPE 或 html 标签......这可能会导致各种基于渲染/不渲染的问题。
<!DOCTYPE html>
<html>
<body>
<div id="fullpage">
<div class="section">
some stuff that should not be printed
</div>
<div class="section">
even more stuff that should not be printed
</div>
<div class="section" id="results_page">
<img id="result_image" class="archiv" src="./images/heumarkt/APDC0013.JPG">
<div class="content_wrapper" id="result_text">
<h1 id="result_h1">some stuff</h1>
<h2 id="result_h2">more headlines</h2>
<p id="result_p1">some text</p>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(true)">print</button>
<button class="print_trigger" onclick="javascript:print_stadtarchiv(false)">print without picture</button>
</div>
</div>
</div>
</body>
</html>
