Mor*_*ost 1 javascript css printing
所以我正在尝试向 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>
这是应该隐藏除 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;
}
}
javascript 函数非常简单，取决于用户单击哪个按钮，它会将“不可打印”类添加到图片元素，然后打印文档（我不确定 html、css 或 js 是否是这里的罪魁祸首，这就是为什么我将所有这些都包含在问题中的原因）：
function print_stadtarchiv(print_picture){
if(!print_picture) $('#result_image').addClass = 'unprintable';
window.print();
}
那么，考虑到所有这些，什么可能导致我的打印机吐出空白页？
对于遇到此问题的任何人（尤其是使用引导程序时），这可能是 CSS 问题而不是 javascript 问题。
我的困境是我们在页面顶部有一个打印按钮，称为“window.print()”函数。这导致了一个空白的打印预览页面。奇怪的是几周前它完全正常工作。
所以首先，就像许多线程提到的那样，检查这确实不是 javascript 问题。我对 window.print() 的调用确实打开了打印预览窗口（这意味着我们没有意外地在某处用另一个变量覆盖了打印函数。）
问题在于 Bootstrap 的容器和容器流体类未在打印模式下显示。显然，这些类被告知不能在打印样式上显示（大概来自引导样式表）。
我所要做的就是添加以下 CSS 打印规则：
.container, .container-fluid {
width: auto;
display: block!important;
}
它再次显示！这也通过此处的引导程序文档暗示：http : //getbootstrap.com/getting-started/#support-printing
因此，简而言之，检查 CSS 是否是问题所在，不要再责怪那个糟糕的 Javascript。