媒体查询中的打印问题答案

【问题标题】：Issue with Print in Media Queries媒体查询中的打印问题
【发布时间】：2014-01-13 19:20:52
【问题描述】：

代码：

HTML

    <input type="button" onclick="functionPrint()"  value="Print"/>

Javascript

    function functionPrint()
    {    
    var dydiv = document.createElement('div');
    dydiv.id='printcontent';
    mydiv.innerHTML="HI";
     window.print();   
    }

CSS

    #printcontent{
          display: none;
    }

        @media print {
            body * {
               display: none;
            }
            #printcontent, #printcontent * {
               display: block !important;
            }
            #printcontent {
               position: absolute;
               left: 0;
               top: 0;
            }
        }

更新：

演示：http://jsfiddle.net/Ryh3G/4/

我正在使用媒体查询打印一个动态 div。它正在打印白页。任何帮助，将不胜感激。谢谢。

【问题讨论】：

把mydiv.innerHTML = "HI";改成dydiv.innerHTML = "HI";。
已更改，但正在打印白页。

标签： javascript jquery css printing media-queries

【解决方案1】：

这里，未定义变量mydiv，使用dydiv

【讨论】：

谢谢，还是打印白页？
谢谢，毛利克。但我不想开窗？
我认为如果没有打开打印对话框，您可能无法打印。请搜索您可能会找到。
uframe?.. 你的意思是 iframe 吗？怎么样？

【解决方案2】：

请按如下所示更改功能

function functionPrint(){  
  var dydiv = document.createElement('div');
  dydiv.id='printcontent';
  dydiv.innerHTML="HI";
  window.print();   
}

【讨论】：

谢谢！我改了，现在打印白页了？请帮忙

【解决方案3】：

如果你在你的 css 中重印的 body * 是 display:none，那么页面将被打印为空。 #printcontent 不在正文之外，因为正文包含整个页面。而是更具体地使用您的打印 css。查看 Boilerplate 的印刷媒体查询以获得良好的起点。

 @media print {
        body * {
           display: none; // THIS WILL HIDE ALL CONTENT BETWEEN THE BODY TAGS so your page will be empty.
        }
        #printcontent, #printcontent * {
           display: block !important;
        }
        #printcontent {
           position: absolute;
           left: 0;
           top: 0;
        }
    }

【讨论】：