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

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>

這是我的Javascript，可以打印DIV並且可以正常工作。 但是我可以確定我的CSS沒有加載，因為我做了粉紅色的測試色，但仍然沒有顯示出來。 請幫忙。 這是我的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的名稱而不是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 個解決方案

解決方案1
1 2016-04-29 15:31:27

解決方案2
0 2016-04-29 15:17:43

解決方案3
0 2016-04-29 15:19:58

解決方案4
0 2017-07-19 06:45:33

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

問題描述

4 個解決方案

解決方案1 1 2016-04-29 15:31:27

解決方案2 0 2016-04-29 15:17:43

解決方案3 0 2016-04-29 15:19:58

解決方案4 0 2017-07-19 06:45:33

解決方案1
1 2016-04-29 15:31:27

解決方案2
0 2016-04-29 15:17:43

解決方案3
0 2016-04-29 15:19:58

解決方案4
0 2017-07-19 06:45:33