Question

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

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为打印对话框上的某些元素设置不起作用，有什么想法，帮助，建议，线索？

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

在打印预览对话框，背景颜色或背景css设置不渲染

1 个答案: