Javascript windows.print结果为空页_Javascript_Css_Printing

Javascript windows.print结果为空页

javascript css printing

Javascript windows.print结果为空页,javascript,css,printing,Javascript,Css,Printing,所以我尝试在html页面中添加一个打印按钮。页面的大部分内容不应该以打印方式显示，因此我将所有内容都隐藏在打印中，然后只显示应该打印的一个div（或者这就是我正在尝试的）。但是当我尝试打印按钮时，结果页面完全是空的。页面的html结构如下所示： <body> <div id="fullpage"> <div class="section"> some stuff that should not be printed </

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

javascript函数非常简单，取决于用户单击的按钮，它将“unprintable”类添加到picture元素，然后打印文档（我不确定html、css或js是否是罪魁祸首，这就是为什么我将所有这些都包括在问题中）：

那么，考虑到所有这些，是什么原因导致我的打印机吐出空页呢？

给你：

     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>


一些不应该打印的东西
甚至更多不应该打印的东西
一些东西
更多标题
一些文本
打印
不带图片打印

给你：

     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

方法来完成它。

对于任何有相同问题的人：我不知道是什么原因导致它，但是我可以使用中详述的

window.frame

方法来完成。对于任何有此问题的人（特别是使用引导），这可能是CSS问题，而不是javascript问题

我的困境是，页面顶部有一个打印按钮，名为“window.print（）”函数。它产生了一个空白的打印预览页面。奇怪的是，它在几周前工作得很好

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

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

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

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

它又出现了！这里的引导文档也暗示了这一点：

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

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

我的困境是，页面顶部有一个打印按钮，名为“window.print（）”函数。它产生了一个空白的打印预览页面。奇怪的是，它在几周前工作得很好

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

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

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

它又出现了！这里的引导文档也暗示了这一点：

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

为什么它需要返回window.print？啊，我只是把周围的标签忘了，但我还没有坏到忘了这一点，我的意思是“如果它不返回，为什么它会工作呢？”°v°好的，我用return试用过，打印输出仍然是空的。最好是返回一些东西，而不是什么都不返回。即使你返回无效。没有理由不返回函数负责的基本内容。你在不同的浏览器上尝试过它吗，因为它对我来说很好。为什么它需要返回window.print？啊，我只是把周围的标签忘了，但我还没有坏到忘记我的意思是“v”“如果它没有返回，如果它没有返回，为什么它会工作？”？“°v°好的，我用return试用过，打印输出仍然是空的。最好的做法是返回一些东西，而不是什么都不返回。即使你返回无效。没有理由不返回函数负责的基本内容。您是否在不同的浏览器上尝试过它，因为它对我很好。