使用CSS打印DIV内容，不起作用

Print DIV Content with CSS, not working

本文关键字：不起作用 内容 DIV CSS 打印 使用      更新时间：2023-09-26

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

这是我的Javascript，它打印DIV，并且运行良好。但是我的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;
    }
}

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

更改

mywindow.document.write(data);

到

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

我做了类似的（事实上是相同的）任务，并按照如下方式完成：

打开"打印版本"文档（空模板），并在其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" />
...

我在您的代码中看不到链接CSS和Html tag的类的引用，请尝试类似的操作：

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

问候

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

相关文章：