chrome 打印

第一种方法打印一页纸时没问题,但是多页的时候就出现问题了,有下拉条出现了并且只打印显示第一页其他页没了……

所以我改变了一下,弄成方法二 里面的内容。将要打印的内容重新填写一次到新的页面 可以解决打印翻页的问题

html

<body>
<div id="body">
<!-- 整体-->
    <section id="content" class="main-content">
     <!--显示内容-->
    </section>
    <div id="printdiv" hidden="hidden">
<!--打印内容-->
    </div>
</div>
</body>

方法一:

js

var bodydiv=null;
var printdiv=null;
function pd() {
 if(bodydiv==null) {
  bodydiv = document.getElementById('body').innerHTML;
 }
 if(printdiv==null){
  printdiv=document.getElementById('printdiv').innerHTML;
//innerHTML 提取的是下一级的元素,不包含自身
 }
 document.body.innerHTML = printdiv;
 window.print();
 document.body.innerHTML = bodydiv;
 return;
}

上面的方法有个bug 

  在chrome浏览器上打印时,打印的内容超出一页是会出现下拉条,而且只打印第一页

方法二

var oPrintBtn = document.getElementById("js_print");
var oDiv2 = document.getElementById("oDiv2");
function pd() {
var oPop = window.open('', 'oPop');
var str = '<!DOCTYPE html>'
str += '<html>'
str += '<head>'
str += '<meta charset="utf-8">'
str += '<title>打印</title>'
str += '<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">'
str += '<style>';
str += ".mytable { border-color: #e1e5ec; border-top: 1px; 
        vertical-align: middle; border-spacing: 0; }";
str += ".mytable td { padding: 10px; }";
str += ".mytable1 td { padding: 3px; }";
str += ".mytable th { padding-top: 10px; padding-bottom: 10px; }";
str += ".mytable1 th { padding-top: 3px; padding-bottom: 3px; }";
str += ".table2 td { padding: 1px;}";
str += "p { text-indent: 2em }";
str += "body{font-size: 13px;" +
"font-family: 微软雅黑, Arial, sans-serif;}";
str += "h3{box-sizing: border-box;" +
"color: rgb(65, 65, 65);" +
"display: block;" +
"font-size: 24px;" +
"font-weight: normal;" +
"font-weight: bold;}";
str += "th{border-collapse: collapse;" +
"color: rgb(68, 68, 68)" +
"font-weight: bold;}";
str += "td{display: table-cell;" +
"vertical-align: middle;" +
"font-weight: normal;}"
str += '</style>';
str += '</head>'
str += '<body>'
str += document.getElementById('printdiv').innerHTML;
str += '</body>'
str += '</html>'
oPop.document.write(str);
oPop.print();
oPop.close();
}


转载于:https://my.oschina.net/u/1581956/blog/614432

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值