项目开发中,都有一个这样的需求:
当页面设计好后需要打印出来,如网页的的打印浏览和打印功能,有些公司需要让前端开发好页面打印出来或者转为pdf格式的文档
如何实现??直接上例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function preview(oper){ if (oper < 10){ bdhtml=window.document.body.innerHTML; //获取当前页的html代码 sprnstr="<!--startprint"+oper+"-->"; //设置打印开始区域 eprnstr="<!--endprint"+oper+"-->"; //设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } function xx(){ window.print(); } </script> </head> <body> <span> 预览功能可以使用谷歌浏览器,ie预览功能同上,其他好像不支持</span> <span style="color: red">直接粘贴到页面(html)中就可以使用</span> <!--startprint1--> <!--打印内容开始--> <div id=sty> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dignissimos et ex nam odio omnis, optio provident, quos reiciendis sint vel voluptatum. Assumenda exercitationem necessitatibus perferendis quam veniam voluptates!</span> </div> <!--打印内容结束--> <!--endprint1--> <input type=button name='button_export' title='打印1' οnclick=preview(1) value=打印图片> <input type="button" value="打印整个网页" οnclick="xx()"> </body> </html> 效果如下:
区域内指的是:你希望网页打印的范围哪里到哪里,比如一个网页你只想打印Body部分,不想打印header,那就可以把body放在区域内即可。
方法:
<!--startprint1--> <!--打印内容开始--> <div id=sty> <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias atque dignissimos et ex nam odio omnis, optio provident, quos reiciendis sint vel voluptatum. Assumenda exercitationem necessitatibus perferendis quam veniam voluptates!</span> </div> <!--打印内容结束--> <!--endprint1-->把需要打印的东西放置<!--startprint1-->和<!--endprint1-->中。