js实现局部页面打印预览原理及示例代码


Posted in Javascript onJuly 03, 2014

最近有朋友问js 如何打印预览,今天就来讲解一下,首先了解一下打印原理,其实局部打印页面很简单。就是把你需要打印的部分做一个起始标记,至于标记如何写,随便你写什么。我这里就写 <!--startprint--> 需要打印的内容

<!--endprint-->. 因为标记是不需要让用户看见的所以加了注释!具体实现代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<title>打印预览简单实现</title> 
</head> 
<body> 
<div> 
这是body 里的内容不需要打印,具体的页面设计根据自己的要求自行设计。如果需要一个页面多个tag,可以动态生成tag 
</div> 
<!--startprint--> 
<div> 
这是我需要打印的内容 
</div> 
<!--endprint--> 
<script type="text/javascript"> 
function preview() 
{ 
var bdhtml=window.document.body.innerHTML;//获取当前页的html代码 
var startStr="<!--startprint-->";//设置打印开始区域 
var endStr="<!--endprint-->";//设置打印结束区域 
var printHtml=bdhtml.substring(bdhtml.indexOf(startStr)+startStr.length,bdhtml.indexOf(endStr));//从标记里获取需要打印的页面 

window.document.body.innerHTML=printHtml;//需要打印的页面 
window.print(); 
window.document.body.innerHTML=bdhtml;//还原界面 
} 
preview(); 
</script> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript 事件查询综合
Jul 13 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
js处理php输出时间戳对不上号的解决方法
Jun 20 Javascript
js中遍历Map对象的方法
Jul 27 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
angular中的http拦截器Interceptors的实现
Feb 21 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
vue-router配合ElementUI实现导航的实例
Feb 11 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
window.returnValue使用方法示例介绍
Jul 03 #Javascript
基于javascript的JSON格式页面展示美化方法
Jul 02 #Javascript
jQuery窗口、文档、网页各种高度的精确理解
Jul 02 #Javascript
JS实现鼠标经过好友列表中的好友头像时显示资料卡的效果
Jul 02 #Javascript
jquery序列化表单以及回调函数的使用示例
Jul 02 #Javascript
IE8下Jquery获取select选中的值post到后台报错问题
Jul 02 #Javascript
js面向对象编程之如何实现方法重载
Jul 02 #Javascript
You might like
哪吒敖丙传:新人物二哥敖乙出场 小敖丙奶气十足
2020/03/08 国漫
简单的PHP图片上传程序
2008/03/27 PHP
PHP引用(&amp;)各种使用方法实例详解
2014/03/20 PHP
如何使用jQuery+PHP+MySQL来实现一个在线测试项目
2015/04/26 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
详细解密jsonp跨域请求
2015/04/15 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
json字符串对象转换代码实例
2019/09/28 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
Python使用稀疏矩阵节省内存实例
2014/06/27 Python
Python2.x中文乱码问题解决方法
2015/06/02 Python
Django页面数据的缓存与使用的具体方法
2019/04/23 Python
Django组件cookie与session的具体使用
2019/06/05 Python
python实现ip地址的包含关系判断
2020/02/07 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
在Tensorflow中实现leakyRelu操作详解(高效)
2020/06/30 Python
requests在python中发送请求的实例讲解
2021/02/17 Python
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
美国在线宠物商店:Chewy
2019/01/12 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
研究生自荐信
2013/10/09 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
团委副书记工作总结
2015/08/14 职场文书
导游词之吉林花园山
2019/10/17 职场文书
Python循环之while无限迭代
2022/04/30 Python