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 相关文章推荐
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
js或jquery实现页面打印可局部打印
Mar 27 Javascript
js中通过父级进行查找定位元素
Jun 15 Javascript
jquery实现可拖拽弹出层特效
Jan 04 Javascript
深入理解关于javascript中apply()和call()方法的区别
Apr 12 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
webpack入门必知必会
Jan 16 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 Javascript
JS实现的简单分页功能示例
Aug 23 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
Nov 30 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
从0搭建vue-cli4脚手架
Jun 17 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
DC的38部超级英雄动画电影
2020/03/03 欧美动漫
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
js程序中美元符号$是什么
2008/06/05 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
Bootstrap表格和栅格分页实例详解
2016/05/20 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
原生js实现选项卡功能
2017/03/08 Javascript
jQuery插件DataTables分页开发心得体会
2017/08/22 jQuery
React-Native中props具体使用详解
2017/09/04 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python的socket编程入门
2018/01/29 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
Python多继承原理与用法示例
2018/08/23 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
饭店工作计划书
2014/01/10 职场文书
土建专业大学生自荐信范文
2014/04/09 职场文书
党员承诺书范文2015
2015/04/27 职场文书
汤姆叔叔的小屋读书笔记
2015/06/30 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
php实例化对象的实例方法
2021/11/17 PHP
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript