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.