window.print()未在打印预览中加载CSS
window.print() CSS not loaded in print preview
我需要提供打印网页的一部分的选项。这是使用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>
因为你正在用没有任何样式id的html编写文档这意味着它只写div的内容,而不包含div。
使用这个来获取整个div
$('<div/>').append($(elem).clone()).html();
看这个小提琴
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;
}
我发现这个页面很有帮助。看一看
打印,打印预览与打印CSS工作很棒。我在openart产品页面上做的。现在我试着把它打印成pdf格式,如果你有一些线索的话,那就太好了
相关文章:
- 当我更改Joomla时,它仍然从旧域加载CSS和Javascript
- 在非我的页面上重新加载CSS
- 网站未加载css、js或图像
- 如何在node.js和express中首先加载CSS
- 没有在django项目中加载CSS文件
- 在php中htaccess重定向url后,无法加载css和js
- Javascript可能阻止加载css背景图像
- 无法查找元素'手动加载CSS文件时的CSS属性
- 加载CSS文件并覆盖上一个文件
- 使用 JavaScript 动态加载 CSS 文件
- HTML 不加载 CSS ,刷新后一切正常.同样在移动设备上,它在首次加载时不起作用
- 仅在codeigniter视图页中加载CSS
- 如何在localhost上加载css和引导程序文件
- 为不同的屏幕分辨率加载css样式的Javascript不起作用
- QWebView.setHtml没有't加载CSS文件
- 预加载CSS背景图像[Can't use sprite]
- 如何加载css和js
- 使用requestAnimationFrame异步加载CSS样式表
- 使用 Angular 样式加载 CSS
- IE8 有时不加载 CSS