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和＃34之外的所有内容＆＃34; results_page＆＃34; （当然，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函数非常简单，具体取决于用户点击的按钮，添加了＆＃34; unprintable＆＃34;对图片元素进行分类然后打印文档（我不确定html，css或者js是否是罪魁祸首，这就是我在问题中包含所有这些内容的原因）：

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

所以，鉴于所有这些，可能导致我的打印机吐出空页的原因是什么？

Answer 1

对于遇到此问题的任何人（特别是如果使用引导程序），它可能是CSS问题而不是javascript问题。

我的困境是我们在页面顶部有一个打印按钮，名为＆＃34; window.print（）＆＃34;功能。它导致了一个空白的打印预览页面。奇怪的是，几个星期前它的工作完全正常。

首先，就像许多线程提到的那样，检查这确实不是一个javascript问题。我对window.print（）的调用确实打开了打印预览窗口（这意味着我们没有意外地用某个地方的另一个变量覆盖打印函数。）

问题在于Bootstrap的容器和容器流体类没有显示打印模式。显然这些类被告知不能在打印样式上显示（可能来自bootstrap样式表）。

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

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

再次显示！这也是通过引导文档暗示的：http://getbootstrap.com/getting-started/#support-printing

简而言之，检查CSS是否存在问题，并停止指责可怜的Javascript。

Answer 2

你走了：

     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>

Answer 3

对于有同样问题的人：我无法弄清楚导致它的原因，但我可以使用this answer中详细阐述的window.frame方法完成此任务。

windows.print导致空页面

3 个答案: