问题如下:
原始表单 ,需要打印在浏览器上打印该表单
出以下效果
原因:是因为当表被复制到一个新窗口时,您的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();
}