Javascript 在“打印预览”对话框中，背景色或背景css设置不会渲染_Javascript_Jquery_Css_Printing

Javascript 在“打印预览”对话框中，背景色或背景css设置不会渲染

javascript jquery css printing

Javascript 在“打印预览”对话框中，背景色或背景css设置不会渲染,javascript,jquery,css,printing,Javascript,Jquery,Css,Printing,下面是我从所选元素容器呈现自定义打印的代码 function printDiv() { var divContent='<div id="cosbox_holder">' + $("#cosbox_container").html() + '</div><div class="tablewrapper"><table border="0" cellpadding="0" cellspacing="0">' + $("#rsr_table")

下面是我从所选元素容器呈现自定义打印的代码

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();       
}

函数printDiv（）{
var divContent='+$（“#cosbox_container”）.html（）+'+$（“#rsr_table”）.html（）；
//cosbox_集装箱
var mywindow=window.open（“”，'my div'，'height=600，width=1000'）；
var htm='收据'+
'' +
“#cosbox_保持架{最大宽度：100%；最大高度：100%；清除：两者；浮动：无；宽度：100%；显示：表格；}”+
“.col-sm-2{padding:2px；width:49%；display:inline块；float:left；margin:0px；}”+
“.cosbox{填充：0px；高度：97px；字体大小：13px；背景：红色！重要；背景颜色：红色！重要；}”+
//“.cosbox.cosbox_标题{填充：5px；边距：0；字体大小：粗体；颜色：#fff；背景：rgba（0,0,0,1）；溢出：隐藏}”+
'表格{宽度：100%；背景色：蓝色！重要；}'+
'表格，表格td，表格th{字体大小：13px；文本对齐：居中；边距：0px；}'+
“.tablewrapper{border:1px solid#cccc；}”+
“表th{边框底部：2px实心#cccc；}”+
'表td{填充：3px；边框底部：1px实心#cccc；}'+
'table tr:last child td{border bottom:none！important；}'+
'' +
''+divContent+''；
mywindow.document.write（htm）；
mywindow.document.close（）；//对于IE>=10是必需的
mywindow.focus（）；//IE>=10所必需的
mywindow.print（）；
mywindow.close（）；
}

这里的主要问题是，背景色或背景css设置对于打印对话中的某些元素不起作用，有什么想法、帮助、建议、线索吗

.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的背景色

为什么不打开一个包含HTML文件中模板的URL的窗口，并通过querystring注入所需的数据？是的，这就是我上面的函数实际发生的情况。它在一个新窗口上打开并显示打印对话框，我可以看到新窗口中的所有颜色，但在打印对话框上看不到。UEI尝试过“-webkit打印颜色调整：精确；”它可以工作，但这是跨浏览器吗？