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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章