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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM