Js打印表格时部分边框不显示(table 标签)

问题如下:

原始表单 ,需要打印在浏览器上打印该表单

出以下效果

 

原因:是因为当表被复制到一个新窗口时,您的CSS不被保留。你可以通过将一些相关的CSS传递到document.write()方法中的新窗口来解决这个问题。您还需要提供少量的填充来介绍边界。 

解决效果:

主要代码:

function printOrder() {
        var divToPrint = document.getElementById('box');
        var htmlToPrint = '' +
            '<style type="text/css">' +
                'table {'+
                'border-right:1px solid #000;' +
                'border-bottom:1px solid #000;'+
                '}' +
                'table td{'+
                    'border-left:1px solid #000;'+
                    'border-top:1px solid #000'+
                '}'+
                '#box > table:nth-child(3){' +
                    'width:1505px;'+
                    'height:143px;'+
                    'margin-bottom: 20px;'+
                '}'+
                '#box > table:nth-child(4){' +
                    'width:1505px;'+
                    'height:143px;'+
                    'margin-bottom: 20px;'+
                '}'+
                '#box > table:nth-child(5){' +
                    'width:1505px;'+
                    'height:143px;'+
                    'margin-bottom: 20px;'+
                '}'+
                '#box > table:nth-child(6){' +
                    'width:1505px;'+
                    'height:143px;'+
                    'margin-bottom: 20px;'+
                '}'+
                '#box > p.text-center > span{' +
                    'position: relative;'+
                    'left: 50%;'+
                '}'+
                '#box > p.clearfix.order-title > span.pull-left.order-num{' +
                    'position: relative;'+
                    'right: -78%;'+
                '}'+
                '#box > p.clearfix.order-title > span.pull-left.partment{' +
                    'position: relative;'+
                    'left: 2%;'+
                '}'+
            '</style>';
        htmlToPrint += divToPrint.outerHTML;
        newWin = window.open("");
        newWin.document.write(htmlToPrint);
        newWin.print();
        newWin.close();
    }

 http://www.it1352.com/567096.html

posted @ 2019-12-06 15:03  yinder  阅读(3407)  评论(0编辑  收藏  举报