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 相关文章推荐
js+css实现的简单易用兼容好的分页
Dec 30 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
详解AngularJS如何实现跨域请求
Aug 22 Javascript
js评分组件使用详解
Jun 06 Javascript
react router 4.0以上的路由应用详解
Sep 21 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 Javascript
微信小程序搭建自己的Https服务器
May 02 Javascript
原生javascript中this几种常见用法总结
Feb 24 Javascript
JS性能优化实现方法及优点进行
Aug 30 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制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
一些不错的js函数ajax
2008/08/20 Javascript
js实现幻灯片效果(基于jquery插件)
2013/11/05 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
2016/04/29 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
js仿百度音乐全选操作
2017/01/13 Javascript
jQuery插件form-validation-engine正则表达式操作示例
2017/02/09 Javascript
Nodejs+Socket.io实现通讯实例代码
2017/02/13 NodeJs
JS实现对json对象排序并删除id相同项功能示例
2018/04/18 Javascript
为jquery的ajax请求添加超时timeout时间的操作方法
2018/09/04 jQuery
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
Node.js assert断言原理与用法分析
2019/01/04 Javascript
如何优雅地在Node应用中进行错误异常处理
2019/11/25 Javascript
[36:17]DOTA2上海特级锦标赛 - VGL音乐会全集
2016/03/06 DOTA
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
python实现word 2007文档转换为pdf文件
2018/03/15 Python
pandas数据预处理之dataframe的groupby操作方法
2018/04/13 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
python3 深浅copy对比详解
2019/08/12 Python
Django对models里的objects的使用详解
2019/08/17 Python
Win10 安装PyCharm2019.1.1(图文教程)
2019/09/29 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Ralph Lauren法国官网:美国高品味时装品牌
2017/12/08 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
搬家公司的创业计划书
2014/01/01 职场文书
创业资金计划书
2014/02/06 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
捐款仪式主持词
2015/07/04 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis