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.validate使用攻略 第一部
Jul 01 Javascript
JQuery对checkbox操作 (循环获取)
May 20 Javascript
改变隐藏的input中value值的方法
Mar 19 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
Jul 14 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
Aug 17 Javascript
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
Vue 使用计时器实现跑马灯效果的实例代码
Jul 11 Javascript
layui表格设计以及数据初始化详解
Oct 26 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 ci框架验证码实例分析
2013/06/26 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
php检测url是否存在的方法
2015/04/14 PHP
Yii中表单用法实例详解
2016/01/05 PHP
firefox插件Firebug的使用教程
2010/01/02 Javascript
探讨jQuery的ajax使用场景(c#)
2013/12/03 Javascript
DOM基础教程之模型中的模型节点
2015/01/19 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
2018/11/05 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
2019/06/18 jQuery
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
JS事件循环机制event loop宏任务微任务原理解析
2020/08/04 Javascript
Python列表删除的三种方法代码分享
2017/10/31 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
浅谈python函数调用返回两个或多个变量的方法
2019/01/23 Python
Python3日期与时间戳转换的几种方法详解
2019/06/04 Python
详解利用Python scipy.signal.filtfilt() 实现信号滤波
2019/06/05 Python
解决pycharm运行程序出现卡住scanning files to index索引的问题
2019/06/27 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
python颜色随机生成器的实例代码
2020/01/10 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
详解利用css3的var()实现运行时改变scss的变量值
2021/03/02 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
党风廉政承诺书
2014/03/27 职场文书
保安公司服务承诺书
2014/05/28 职场文书
田径运动会通讯稿
2014/09/13 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
复制别人的成功真的会成功吗?
2019/10/17 职场文书
多表查询、事务、DCL
2021/04/05 MySQL
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
《勇者辞职不干了》上卷BD发售宣传CM公开
2022/04/08 日漫
win10截图快捷键win+shift+s没有反应无法截图怎么解决?
2022/08/14 数码科技