window.print（）CSS未加载打印预览

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

浏览器：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>

来源

2013-05-03 Balaji Krishnan

任何链接来尝试和调试代码？ – 2013-05-03 19:07:03

因为你写的HTML文档没有任何风格的IDS 这意味着它只能写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; 
}

来源

2013-05-03 18:29:59 NullPointerException

嗨，谢谢你的回应。我只是给出了链接以显示使用的方法。我在文档中有样式表，它反映在弹出窗口中。顺便说一句，我甚至启用了工具下的选项 - > internet选项 - >高级图像中包含图像 – 2013-05-03 18:47:30

您可以发布您的代码吗？ – NullPointerException 2013-05-03 19:12:20

哦，我知道了。当你写内容的时候，它只是用id来写div的内容。将您的内容包裹在另一个div中，然后打印。查看编辑过的部分 – NullPointerException 2013-05-03 19:26:42

我发现this页面有帮助。看一看。

打印&打印预览与打印CSS效果很好。我在opencart产品页面中做过。现在我尝试打印它的pdf格式，如果你有一些线索，那会很好。

来源

2013-07-08 16:32:50 MariaC

window.print（）CSS未加载打印预览

回答

相关问题