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 面向对象 重载
May 13 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
Feb 25 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
vue中的非父子间的通讯问题简单的实例代码
Jul 19 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
vue-cli webpack 引入jquery的方法
Jan 10 jQuery
可能被忽略的一些JavaScript数组方法细节
Feb 28 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
uni-app实现点赞评论功能
Nov 25 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中uploaded_files函数使用方法详解
2011/03/09 PHP
基于Zookeeper的使用详解
2013/05/02 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
深入理解PHP+Mysql分布式事务与解决方案
2020/12/03 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
jquery+json实现动态商品内容展示的方法
2016/01/14 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
JS和jQuery通过this获取html标签中的属性值(实例代码)
2017/09/11 jQuery
webpack项目轻松混用css module的方法
2018/06/12 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
python 把数据 json格式输出的实例代码
2016/10/31 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
对python借助百度云API对评论进行观点抽取的方法详解
2019/02/21 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Python 如何对文件目录操作
2020/07/10 Python
母亲追悼会答谢词
2014/01/27 职场文书
加拿大留学自荐信
2014/01/28 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
商场消防演习方案
2014/02/12 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
环境科学专业求职信
2014/08/04 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
Nginx配置https的实现
2021/11/27 Servers
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技