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调用Activex控件的事件的实现方法
Apr 11 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
javascript日期格式化示例分享
Mar 05 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
Jul 22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
Jun 03 Javascript
javascript 中的console.log和弹出窗口alert
Aug 30 Javascript
xmlplus组件设计系列之列表(4)
Apr 26 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
angular共享依赖的解决方案分享
Oct 15 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
phpmyadmin MySQL 加密配置方法
2009/07/05 PHP
PHP URL地址获取函数代码(端口等) 推荐
2010/05/15 PHP
关于初学PHP时的知识积累总结
2013/06/07 PHP
WordPress的主题编写中获取头部模板和底部模板
2015/12/28 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
js的2种继承方式详解
2014/03/04 Javascript
Jquery方式获取iframe页面中的 Dom元素
2014/05/07 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Angular7创建项目、组件、服务以及服务的使用
2019/02/19 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
2020/04/11 Javascript
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
BookOutlet加拿大:在网上书店购买廉价折扣图书和小说
2018/10/05 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
大三预备党员入党思想汇报
2014/01/08 职场文书
物流管理毕业生自荐信范文
2014/03/15 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
家长学校工作方案
2014/05/07 职场文书
校长创先争优承诺书
2014/08/30 职场文书
无房证明范本
2014/09/17 职场文书
2014年国庆节寄语
2014/09/19 职场文书
html5实现点击弹出图片功能
2021/07/16 HTML / CSS
python编程项目中线上问题排查与解决
2021/11/01 Python
详解在OpenCV中如何使用图像像素
2022/03/03 Python