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 相关文章推荐
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
基于jquery实现省市区三级联动效果
Dec 25 Javascript
深入理解jquery中的each用法
Dec 14 Javascript
javascript实现数据双向绑定的三种方式小结
Mar 09 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
JavaScript中this函数使用实例解析
Feb 21 Javascript
JavaScript实现tab栏切换效果
Mar 16 Javascript
如何在JS文件中获取Vue组件
Sep 16 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/04 星际争霸
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
PHP安全配置详细说明
2011/09/26 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
php对象在内存中的存在形式分析
2015/02/03 PHP
PHP SESSION机制的理解与实例
2019/03/22 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
2021/01/27 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
2019/04/26 Javascript
layui复选框的全选与取消实现方法
2019/09/02 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
python实现从ftp服务器下载文件的方法
2015/04/30 Python
python写入xml文件的方法
2015/05/08 Python
python单元测试unittest实例详解
2015/05/11 Python
python获取指定时间差的时间实例详解
2017/04/11 Python
Django自定义认证方式用法示例
2017/06/23 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
浅谈Python中的继承
2020/06/19 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
践行党的群众路线心得体会
2014/11/05 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
给朋友的道歉短信
2015/05/12 职场文书
婚宴父母致辞
2015/07/27 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python