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 相关文章推荐
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
jquery 之 $().hover(func1, funct2)使用方法
Jun 14 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
JavaScript的strict模式与with关键字介绍
Feb 08 Javascript
jQuery DOM操作实例
Mar 05 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
微信小程序页面传多个参数跳转页面的实现方法
May 17 Javascript
JS新手入门数组处理的实用方法汇总
Apr 07 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 str_pad() 将字符串填充成指定长度的字符串
2010/02/23 PHP
php断点续传之如何分割合并文件
2014/03/22 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
JavaScript DOM 学习第五章 表单简介
2010/02/19 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
表单提交前触发函数返回true表单才会提交
2014/03/11 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
Javascript 多物体运动的实现
2014/12/24 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Bootstrap开关(switch)控件学习笔记分享
2016/05/30 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
angular.fromJson与toJson方法用法示例
2017/05/17 Javascript
Vue代码分割懒加载的实现方法
2017/11/23 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
微信小程序实现录音时的麦克风动画效果实例
2019/05/18 Javascript
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
运动检测ViBe算法python实现代码
2018/01/09 Python
Python工厂函数用法实例分析
2018/05/14 Python
python 实现在tkinter中动态显示label图片的方法
2019/06/13 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
python 通过文件夹导入包的操作
2020/06/01 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
舞会礼服和舞会鞋:PromGirl
2019/04/22 全球购物
事务机电主管工作职责
2014/02/25 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
2015公司年度工作总结
2015/05/14 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers