打印时无法将css文件添加到html

时间:2015-08-26 11:28:08

标签: javascript jquery html css

我正在尝试在打印时将css文件添加到HTML内容中。但是没有添加css文件。我没有CSS得到输出。任何人都可以帮助我......

这是我的代码

<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('', 'mydiv', 'height=700,width=1200');
        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<link rel="stylesheet" href="print.css" type="text/css" media="print"/>');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10

        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>

<div>
    This will not be printed.
</div>

<div id="anotherdiv">
    Nor will this.
</div>

<input type="button" value="Print Div" onclick="PrintElem('#mydiv')" />

</body>
</html>

这是我的CSS文件'print.css'

@media print {
	#mydiv {
		border: 10px solid !important;
		color: red;
		font-size:20px !important;
	}
}

1 个答案:

答案 0 :(得分:0)

找出问题所在:

  1. 你正在传递元素&#39; mydiv&#39;使用PrintElem。
  2. PrintElem函数仅提取内部html 而不是完整div
  3. 您将其发送到另一个函数Popup(仅限mydiv的innerhtml)
  4. Popup正在用一些html,css和js
  5. 打开新页面
  6. 在数据变量中,您只能获得文本,而不是DIV&#39; mydiv&#39;,实际上只需要内部html而不是内部html。
  7. 因此,当您的页面加载时,找不到mydiv在哪里应用css。
  8. 解决方案请将整个div传递给popup函数

    然后将div.html()传递给它

    尝试这样的事情或尝试其他方式

     function PrintElem(elem)
     {
        Popup($(elem)); // send div not html only
     }