Question

无法使样式表处理打印文档。它适用于弹出窗口，但不适用于打印时。因此，当屏幕上的窗口弹出时，它具有正确的样式，但是当使用打印对话框时，打印窗口的内容，它不会从样式表中仅使用默认样式的样式。

以下是代码：

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

Answer 1

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

Answer 2

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

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

Answer 3

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

打印DIV样式表的内容不起作用

3 个答案: