windows.print 结果为空白页

Question

所以我正在尝试将打印按钮添加到 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 函数非常简单，根据用户单击的按钮，它会将 "unprintable" class 添加到图片元素，然后打印文档（我不是确定 html、css 或 js 是这里的罪魁祸首，这就是为什么我将所有这些都包含在问题中的原因）：

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

那么，鉴于所有这些，是什么导致我的打印机吐出空白页？

Answer 1

给你：

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

您似乎也没有 DOCTYPE 或 html 标签...这可能会导致各种基于 rendering/not-rendering 的问题。

<!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>

Answer 2

对于遇到同样问题的任何人：我无法弄清楚是什么原因造成的，但我可以使用 this answer 中阐述的 window.frame 方法来完成它。

Answer 3

对于遇到此问题的任何人（尤其是使用 bootstrap 时），这可能是 CSS 问题而不是 javascript 问题。

我的困境是我们在页面顶部有一个调用 "window.print()" 函数的打印按钮。结果是一个空白的打印预览页面。奇怪的是几周前它还工作得很好。

所以首先，就像许多线程提到的那样，检查这确实不是 javascript 问题。我对 window.print() 的调用确实调出了打印预览 window（这意味着我们并非不小心在某处用另一个变量覆盖了打印功能。）

问题出在 Bootstrap 的容器和容器流体类未显示打印模式。显然这些类被告知不能在打印样式上显示（大概来自 bootstrap 样式 sheet）。

我所要做的就是添加以下 CSS 打印规则：

 .container, .container-fluid {
    width: auto;
    display: block!important;
 }

又显示了！ bootstrap 文档也暗示了这一点：http://getbootstrap.com/getting-started/#support-printing

所以简而言之，检查 CSS 是否是问题所在，不要再责怪那个可怜的 Javascript。

windows.print 结果为空白页

windows.print results in empty page

javascript

css

printing