在HTML网页上打印需要的内容,JS代码
2016-04-14 15:31
471 查看
首先在head里面加入下面一段js代码:
然后在所需要打印的代码,用<!--startprint1-->和<!--endprint1-->包围着,如下:
最后加上一个打印的按钮
另外说明一下,在一个HTML页面里面,可以设置多个打印区域,需要改动一下的就只是几个数字就OK了。如:
在选择第二个区域里面时用<!--startprint2--><!--endprint2-->包围着,而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。
还有一点,就是CSS样式表的问题了,打印的效果是不包含背景的打印的,设置是注意一下。<style media="print">、<link media="print">的用法合理应用,media="print"是不被网页所显示的,只能在打印的效果上存在,可以设置出打印效果和在网页上所显示的不一样。
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 console.info(prnhtml); window.document.body.innerHTML = prnhtml; window.print(); window.document.body.innerHTML = bdhtml; } else { window.print(); } }
然后在所需要打印的代码,用<!--startprint1-->和<!--endprint1-->包围着,如下:
<span style="white-space:pre"> </span><!--startprint1--> <!--打印内容开始--> <div id=sty> ... </div> <!--打印内容结束--> <!--endprint1-->
最后加上一个打印的按钮
<input type=button name='button_export' title='打印1' onclick=preview(1) value=打印1>
另外说明一下,在一个HTML页面里面,可以设置多个打印区域,需要改动一下的就只是几个数字就OK了。如:
在选择第二个区域里面时用<!--startprint2--><!--endprint2-->包围着,而按钮自然也改成对应的preview(1)了。这样第二区域的打印就完成。
还有一点,就是CSS样式表的问题了,打印的效果是不包含背景的打印的,设置是注意一下。<style media="print">、<link media="print">的用法合理应用,media="print"是不被网页所显示的,只能在打印的效果上存在,可以设置出打印效果和在网页上所显示的不一样。
相关文章推荐
- javascript运行机制之执行顺序详解
- js 日期格式化函数
- 【转】用Js的eval解析JSON中的注意点
- js时间段判断的函数
- 原生js实现autocomplete插件
- JSP中一些JSTL核心标签用法总结
- JS 小技巧
- XML和JSON解析-----定义与比较
- 157 javascript中对变量和函数的hoist
- js仿3366小游戏选字游戏
- Javascript中的Ajax
- json序列化懒加载问题
- 使用JSP制作一个超简单的网页计算器的实例分享
- json与bean的转换
- js前台实现上传图片的预览
- json
- 实例解析JSP中EL表达式的各种运用
- json对象和json字符串转化
- Javascript实现鼠标框选操作 不是点击选取
- js使用AjaxFileupload插件实现文件上传