项目开发中,都有一个这样的需求:
当页面设计好后需要打印出来,如网页的的打印浏览和打印功能,有些公司需要让前端开发好页面打印出来或者转为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-->中。