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 相关文章推荐
jQuery 自定义函数写法分享
Mar 30 Javascript
用jquery等比例控制图片宽高的具体实现
Jan 28 Javascript
js表头排序实现方法
Jan 16 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
利用jQuery.Validate异步验证用户名是否存在(推荐)
Dec 09 Javascript
使用BootStrap进行轮播图的制作
Jan 06 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
js调用设备摄像头的方法
Jul 19 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
关于layui 下拉列表的change事件详解
Sep 20 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
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
PHP屏蔽蜘蛛访问代码及常用搜索引擎的HTTP_USER_AGENT
2013/03/06 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP中array_map与array_column之间的关系分析
2014/08/19 PHP
PHP 下载文件时如何自动添加bom头及解释BOM头和去掉bom头的方法
2016/01/04 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
js 获取Listbox选择的值的代码
2010/04/15 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
jquery中EasyUI使用技巧小结
2015/02/10 Javascript
Angularjs CURD 详解及实例代码
2016/09/14 Javascript
jQuery动态生成不规则表格(前后端)
2017/02/21 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
vue实现移动端图片裁剪上传功能
2020/08/18 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
使用flow来规范javascript的变量类型
2019/09/12 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
JS实现躲避粒子小游戏
2020/06/18 Javascript
[02:54]辉夜杯主赛事第二日败者组 iG.V赛后采访
2015/12/26 DOTA
Python简单计算数组元素平均值的方法示例
2017/12/26 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
基于Python开发chrome插件的方法分析
2018/07/07 Python
Python subprocess库的使用详解
2018/10/26 Python
pymysql 开启调试模式的实现
2019/09/24 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
Html5新增标签有哪些
2017/04/13 HTML / CSS
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
会计实习期自我鉴定
2013/10/06 职场文书
心理学专业毕业生推荐信范文
2013/11/21 职场文书
大学秋游活动方案
2014/02/11 职场文书
小学生差生评语
2014/12/29 职场文书
军训结束新闻稿
2015/07/17 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python