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 onmouseout 解决办法
Jul 17 Javascript
Javascript排序算法之计数排序的实例
Apr 05 Javascript
jquery遍历函数siblings()用法实例
Dec 24 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
layui.js实现的表单验证功能示例
Nov 15 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
vue-cli点击实现全屏功能
Mar 07 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
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
JQuery中阻止事件冒泡几种方式及其区别介绍
2014/01/15 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
Nodejs中读取中文文件编码问题、发送邮件和定时任务实例
2015/01/01 NodeJs
jQuery实现给页面换肤的方法
2015/05/30 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
js判断出两个字符串最大子串的函数实现方法
2016/11/01 Javascript
WebPack基础知识详解
2017/01/16 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
详解Python文本操作相关模块
2017/06/22 Python
Python探索之Metaclass初步了解
2017/10/28 Python
python实现图片彩色转化为素描
2019/01/15 Python
解析Python的缩进规则的使用
2019/01/16 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
python文件操作的简单方法总结
2019/11/07 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
什么是唯一索引
2015/07/05 面试题
办理暂住证介绍信
2014/01/11 职场文书
五年级音乐教学反思
2014/02/06 职场文书
卫生系统先进事迹
2014/05/13 职场文书
房地产端午节活动方案
2014/08/24 职场文书
升学宴学生答谢词
2015/01/05 职场文书
行政诉讼答辩状
2015/05/21 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏
Golang 实现WebSockets
2022/04/24 Golang