window.print() CSS 未在打印预览中加载答案

【问题标题】：window.print() CSS not loaded in print previewwindow.print() CSS 未在打印预览中加载
【发布时间】：2013-05-03 18:18:20
【问题描述】：

我需要提供打印部分网页的选项。这是使用 javascript window.print() 实现的，由 Bill Paetzke 回答。弹出窗口打开（其中包含 CSS 样式）并且打印对话框也打开。但是 CSS 样式没有出现在打印中。尝试过@media =print，但这也不起作用。 CSS 样式主要由背景颜色组成。我得到的一个选择是用 1px * 1px 的图像替换背景颜色并重复它。有没有其他办法？

浏览器：IE7 代码：

<html>
<head>
<style type="text/css" media="print,screen">
.hideMe{
display:block;
}

.PrintClass {
display:block;

}
.NoPrintClass{
display:block;
}
</style>
<script type="text/javascript"
    src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($('<div/>').append($(elem).clone()).html());
    }

    function Popup(data) 
    {

        var mywindow;       
        mywindow = window.open('', 'mydiv','height=400,width=600,scrollbars=yes','');            
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('<style type="text/css" media="print,screen">.hideMe{display:none;}.NoPrintClass{display:none;}</style>');               
        mywindow.document.write('</head><body>');
        mywindow.document.write('drop down selected value in parent: '+mywindow.opener.document.getElementById('testSelect').options[mywindow.opener.document.getElementById('testSelect').selectedIndex].text+'<br/>');
        mywindow.document.write('contentStarts<br/>');
        mywindow.document.write('  using jquery:  '+data);
        mywindow.document.write(' using javascript: '+mywindow.opener.document.getElementById('mydiv').innerHTML);
        mywindow.document.write('<br/>contentEnds'); 
        mywindow.document.write('<br/>');                                     
        mywindow.document.write('</body></html>');        
        mywindow.document.focus();
        mywindow.document.close();      
        mywindow.print();             
        return true;
    }

   </script>
</head>


<body>

This is not be printed<br/>
<div id="mydiv">This content is to be printed<br/>
<div class="hideMe"><select id="testSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
</div>
<br/>
This will also be printed 
<br/>print  bgcolor
<div style="background:red;" class="PrintClass">print</div><br/>
<div style="background:green;" class="PrintClass">print</div><br/>
<div style="background:red;" class="NoPrintClass">not to print</div><br/>
<div style="background:green;" class="NoPrintClass">not to print</div><br/>
<div style="background:red;" class="PrintClass">print</div><br/>
<div style="background:green;" class="PrintClass">print</div><br/>
<br/> print image
<div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('red.png');background-repeat:repeat;" class="NoPrintClass">not to print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="NoPrintClass">not to print</div><br/>
<div style="background-image:url('red.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<div style="background-image:url('green.png');background-repeat:repeat;" class="PrintClass">print</div><br/>
<text>some text
<div style="position:relative;">
<img src="green.png" width="100px" height="100px" value="abcd">dfads
<div style="postion:absolute">wpeoriu</div>
</div>
</img>
</text>

</div>

<div>This will not be printed.</div>
<br/>
<div id="anotherdiv">Nor will this.</div>

<input type="button" value="Print Div" onclick="PrintElem('mydiv')" />



</body>

</html>

【问题讨论】：

有任何链接可以尝试调试代码吗？

标签： javascript css internet-explorer printing

【解决方案1】：

因为您正在使用没有任何样式 id 的 html 编写文档这意味着它只写了 div 的内容，没有 div 围绕它。

使用它来获取整个 div

 $('<div/>').append($(elem).clone()).html();

看到这个fiddle

HTML

  <div id="mydiv">
    This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante. 
  </div>
    <div>
   This will not be printed.
  </div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

JavaScript

function PrintElem(elem)
{
      Popup($('<div/>').append($(elem).clone()).html());
}

function Popup(data) 
{
    var mywindow = window.open('', 'my div', 'height=400,width=600');
    mywindow.document.write('<html><head><title>my div</title>');
     mywindow.document.write('<link rel="stylesheet" href="http://www.dynamicdrive.com/ddincludes/mainstyle.css" type="text/css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.print();
  //  mywindow.close();

    return true;
}

【讨论】：

您好，感谢您的回复。我只是给出了显示使用方法的链接。我在文档中有样式表，它反映在弹出窗口中。顺便说一句，我什至启用了工具->互联网选项->高级将图像包含在打印中的选项
哦，我明白了。当你写内容时，它只是写没有id的div的内容。将您的内容包装在另一个 div 中，然后打印。查看编辑部分
找到jquery方式获取整个div而不是仅内容，编辑答案
添加了代码。背景和背景图像都不会反映在打印中。如果使用 img 标签，则图像会在打印中看到。我不能使用它，因为我需要在图像上方呈现文本。示例：在发布的代码中，“打印”和“不打印”在 1px * 1px 重复图像上方。

【解决方案2】：

我发现this 页面很有帮助。看看吧。

使用 print css 进行打印和打印预览效果很好。我是在 opencart 产品页面中完成的。现在我试着把它打印成pdf格式，如果你有什么线索，那就太好了。

【讨论】：