100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > js调用打印 并且将页面缩放后进行打印 同时可自定义分页打印demo

js调用打印 并且将页面缩放后进行打印 同时可自定义分页打印demo

时间:2022-03-11 03:32:45

相关推荐

js调用打印 并且将页面缩放后进行打印 同时可自定义分页打印demo

话不多说,直接上demo,注释备注相当清晰

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>缩放打印与分页</title><script type="text/javascript"> function printpage1(){ // body全局打印// 页面缩放,此处缩放为50%,不缩放的话页面超出就打印不出来,这个需要自己调试,看自己document.getElementsByTagName('body')[0].style.zoom=0.5;// 调用window的打印功能window.print(); // 将页面缩放调整到最初状态document.getElementsByTagName('body')[0].style.zoom=1;return false; }function printpage2(){ // 局部打印// 获取局部打印数据var newstr = document.getElementById("println_div").innerHTML;// 缓存body全部数据var oldstr = document.body.innerHTML; // 将局部数据放入body内document.body.innerHTML = newstr; // 页面缩放,此处缩放为50%,不缩放的话页面超出就打印不出来,这个需要自己调试,看自己document.getElementsByTagName('body')[0].style.zoom=0.5;// 调用window的打印功能window.print(); // 打印完成将body数据还回去document.body.innerHTML = oldstr; // 将页面缩放调整到最初状态document.getElementsByTagName('body')[0].style.zoom=1;return false; }</script></head><body><p>1</p><p>2</p><div id="println_div"><h1>打印标题</h1><p>打印内容~~</p><!-- style属性这里是在打印的时候,在标签之前的将作为1页,标签之后作为新的页 --><div style="page-break-before:always;"><br /></div><h1>打印标题</h1><p>打印内容~~</p><div style="page-break-before:always;"><br /></div><h1>打印标题</h1><p>打印内容~~</p></div><button type="button" onclick="printpage1()">全局打印</button><button type="button" onclick="printpage2()">局部打印</button><p>1</p><p>2</p></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。