Question

<script type="text/javascript">
    function PrintElem(elem) {
        Popup($(elem).html());
    }
    function Popup(data) {
        var mywindow = window.open('', 'mydiv', 'height=550,width=750');
        mywindow.document.write('<html><head><title></title>');
        mywindow.document.write('<link rel="stylesheet" href="~/Content/Site.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>

这是我打印DIV的Javascript，工作正常。但我的CSS没有加载，我可以说，因为我做了一个粉红色的测试颜色，它仍然没有出现。请帮忙。 HEre是我的CSS

@media print {
    .mydiv {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
        color:pink;
    }
}

Answer 1

问题很可能是你的CSS试图引用WINDOW的NAME而不是WINDOW中的任何对象。由于我们不知道发送了什么data，请尝试以下方法：

更改

mywindow.document.write(data);

以

mywindow.document.write("<div class='mydiv'>" + data + "</div>");

Answer 2

我做了类似的（实际上是相同的）任务并按照以下方式执行：

打开“打印版本”文档（空模板）并在其onload事件中检索我需要从其父级获取的div 示例代码：

<!-- parent doc -->
<input type="button" value="Printer Version" onclick="doIt()" />
<div id="divPrint" style="display:none;">
   <iframe id="frPrint"></iframe>
</div>
<script>
function doIt(){
   document.getElementById('divPrint').style.display = '';
   document.getElementById('frPrint').src = "print.html?a=" + Math.random();//to avoid caching
}
function getContent(){
   return document.getElementsById('divData').innerHTML;
}
</script>

<!--print.html -->
...
<script type="text/javascript">
    window.onload = function () {
        var a = this.parent.getContent();
        document.body.innerHTML = a;
    }
    function printMe() {
        window.print();
    }
</script>
<style type="text/css">
    .right
    {
        float: right;
    }
</style>
<link href="/Styles/print.css" media="print" rel="stylesheet" />
...

Answer 3

我无法在您的代码中看到将您的CSS与Html tag相关联的类的引用，请尝试类似的内容：

mywindow.document.write('</head><body><div class="mydiv">');
mywindow.document.write(data);  
mywindow.document.write('</div></body></html>');

此致

Answer 4

@media print仅在您调用window.print（）函数时才有效。在这里你正在做的是创建弹出窗口，你在里面放置你的HTML。所以你必须包括所有css，如下所示。请参阅下面的代码。

$(".printtt").on("click",function(e){ 
                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=\"css/bootstrap.min.css\" type=\"text/css\" media=\"print\" />");
                                    //mywindow.document.write("<link rel=\"stylesheet\" href=\"css/sb-admin.css\" type=\"text/css\"  />");
    mywindow.document.write('<style>.printtt{color:pink;}</style>');
                                    mywindow.document.write('</head><body >');
                                    mywindow.document.write($("#page-wrapper").html());
                                    mywindow.document.write('</body></html>');
                    
    setTimeout(function () {
                            mywindow.print();
                        },1000);
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="aaaaa">
    </div>
    <div id="page-wrapper">
    <a href="javascript:void(0);" class="printtt">Print</a>
    </div>

使用CSS打印DIV内容，无法正常工作

4 个答案: