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

时间:2024-02-23 19:36:23

问题如下:

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

出以下效果

 

原因:是因为当表被复制到一个新窗口时,您的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