2015-10-20 52 views
0

这里是我从所选择的元素容器在打印预览对话,背景颜色或背景的CSS设置不渲染

function printDiv() { 
    var divContent='<div id="cosbox_holder">' + $("#cosbox_container").html() + '</div><div class="tablewrapper"><table border="0" cellpadding="0" cellspacing="0">' + $("#rsr_table").html() + '</table></div>'; 
    //cosbox_container 
    var mywindow = window.open('', 'my div', 'height=600,width=1000'); 
    var htm = '<html><head><title>Receipt</title>' + 
     '<style>' + 
     '#cosbox_holder{max-width: 100%; max-height: 100%; clear: both; float: none; width: 100%; display: table;}' + 
     '.col-sm-2{padding: 2px; width: 49%; display: inline-block; float: left; margin: 0px;}' + 
     '.cosbox{padding: 0px; height:97px; font-size:13px; background: red !important; background-color: red !important;}' + 
//   '.cosbox .cosbox_header{padding:5px;margin:0;font-weight:bold;color:#fff;background:rgba(0,0,0,.1);overflow:hidden}' + 
     'table{width: 100%;background-color: blue !important;}' + 
     'table, table td, table th{font-size: 13px; text-align: center; margin: 0px;}' + 
     '.tablewrapper{border: 1px solid #cccccc;}' + 
     'table th{border-bottom: 2px solid #cccccc;}' + 
     'table td{padding: 3px;border-bottom: 1px solid #cccccc;}' + 
     'table tr:last-child td{border-bottom: none !important;}' + 
     '</style>' + 
     '</head><body ><div id="j_print">'+divContent+'</div></body></html>'; 
    mywindow.document.write(htm); 
    mywindow.document.close(); // necessary for IE >= 10 
    mywindow.focus(); // necessary for IE >= 10 
    mywindow.print(); 
    mywindow.close();  
} 

这里的主要问题是,背景色或渲染我的自定义打印代码背景css设置为打印对话中的某些元素是不行的,任何想法,帮助,建议,线索?

+0

为什么不包含在HTML文件模板生成一个网址打开一个窗口,并通过查询字符串注入所需的数据? –

+0

是的,那是从我上面的函数实际发生的事情。它会打开一个新窗口并显示打印对话框,我可以在新窗口中看到所有颜色,但不在打印对话框中 –

+0

我试过'-webkit-print-color-adjust:exact; '它的工作原理是跨浏览器? –

回答

-1
.divForBgColor { 
     position: relative; 
     overflow: hidden; 
} 

.divForBgColor:before { 
     content: ''; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     border: 115px solid #f1f2f2; 
     z-index: -1; 
} 

边框颜色将是div的背景颜色