windows.print导致空页面

windows.print results in empty page

本文关键字：print windows      更新时间：2023-09-26

所以我试图在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>

这里是CSS，它应该隐藏除了id为"results_page"的div之外的所有内容（当然，该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-打印

因此，简而言之，检查CSS是否是问题所在，不要再责怪糟糕的Javascript了。

开始：

     function print_stadtarchiv(print_picture) {
         if(!print_picture) $('#result_image').addClass('unprintable');
         return window.print();
     }

看起来你也没有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>

对于任何有同样问题的人：我不知道是什么原因导致了它，但我可以使用本答案中详细阐述的window.frame方法来完成它。

相关文章：