您的位置：首页 > 其它

chrome 打印

2016-02-10 00:00 267 查看

摘要: 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();
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： chrome 打印

相关文章推荐

新的分享

章节导航