话不多说,直接上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>