Question

代码：

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。它是打印白页。任何帮助，将不胜感激。感谢。

Answer 1

此处，未定义变量mydiv，请使用dydiv

Answer 2

请更改功能，如下所示

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

Answer 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;
        }
    }

媒体查询中的打印问题

3 个答案: