打印不工作的DIV样式表的内容

Print Contents of a DIV stylesheet not working

本文关键字：样式 DIV 工作 打印      更新时间：2023-09-26

无法让样式表在打印文档上工作。它在弹出窗口上工作，但在打印时不起作用。所以当屏幕上的窗口弹出时，它有适当的样式，但是当使用打印对话框时，打印窗口的内容不会从样式表中获取样式，只是默认样式。

代码如下:

<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>

如果你想设计你的打印页面。它不适用于您的样式表。你需要写一个内联样式表

我也遇到过同样的问题，最后解决了，这是代码:

<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>

打印页通常也用于电子邮件。根据我的经验，您应该在代码(内联)中编写所有样式表代码。

相关文章：