問題如下:
原始表單 ,需要打印在瀏覽器上打印該表單
出以下效果
原因:是因為當表被復制到一個新窗口時,您的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();
}