DIV样式表的打印内容不起作用
[英]Print Contents of a DIV stylesheet not working
问题描述
无法获得样式表以在打印的文档上工作。 它在弹出窗口上起作用，但在打印时不起作用。 因此，当屏幕上的窗口弹出时，它具有正确的样式，但是当使用打印对话框打印窗口内容时，它不会采用样式表中的样式，而只是采用默认样式。
这是代码：
<html>
<head>
<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($(elem).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="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<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>
<a href="#" onclick="PrintElem('#mydiv')">Printout</a>
3 个解决方案
解决方案1
0 2013-05-02 07:33:17
如果要设计打印页面，则该页面不适用于样式表，您需要编写内联样式表。
解决方案2
0
我遇到了同样的问题，最后解决了这是代码：
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> </head> <body> <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> <a onClick="PrintElem('#mydiv')" class="btn btn-default btn-icon icon-left hidden-print pull-left"> My Div <i class="entypo-print"></i> </a> <script type="text/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('</head><body >'); myWindow.document.write(data); myWindow.document.write('</body></html>'); myWindow.print(); myWindow.close(); return true; }; </script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script> </body> </html>
解决方案3
0 2017-01-22 07:29:40
打印页面通常也用于电子邮件中。 根据我的经验，您应该在代码中（内联）编写所有样式表代码。
打印 div 的内容 - 使用样式表
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.