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图片上下tab切换效果
Mar 18 Javascript
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
Nov 11 Javascript
Node.js中使用mongoskin操作mongoDB实例
Sep 28 Javascript
javascript正则表达式定义(语法)总结
Jan 08 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
vue获取input输入值的问题解决办法
Oct 17 Javascript
vue中rem的配置的方法示例
Aug 30 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
详解uniapp的全局变量实现方式
Jan 11 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/08/18 杂记
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
google地图的路线实现代码
2009/08/20 Javascript
jquery 简单的进度条实现代码
2010/03/11 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
2011/07/31 Javascript
ExtJS4如何给同一个formpanel不同的url
2014/05/02 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
JavaScript中的函数重载深入理解
2014/08/04 Javascript
javascript实现动态改变层大小的方法
2015/05/14 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
2015/08/05 Javascript
javascript实现点击单选按钮链接转向对应网址的方法
2015/08/12 Javascript
js实现温度计时间样式代码分享
2015/08/21 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
元组列表字典(莫烦python基础)
2019/04/03 Python
Django给admin添加Action的步骤详解
2019/05/01 Python
python多环境切换及pyenv使用过程详解
2019/09/27 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
HTML5 Canvas 实现圆形进度条并显示数字百分比效果示例
2017/08/18 HTML / CSS
社会实践活动总结范文
2014/07/03 职场文书
群众路线领导班子四风对照检查材料
2014/09/27 职场文书
西安大雁塔导游词
2015/02/10 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
辩护词格式
2015/05/22 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
学习党史心得体会2016
2016/01/23 职场文书
Vue如何实现组件间通信
2021/05/15 Vue.js
关于Python中进度条的六个实用技巧分享
2022/04/05 Python
golang的文件创建及读写操作
2022/04/14 Golang