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 相关文章推荐
JS延迟加载(setTimeout) JS最后加载
Jul 15 Javascript
javascript开发技术大全-第3章 js数据类型
Jul 03 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
Feb 25 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
JS生成随机打乱数组的方法示例
Dec 23 Javascript
关于微信小程序登录的那些事
Jan 08 Javascript
Node.js如何优雅的封装一个实用函数的npm包的方法
Apr 29 Javascript
JS中的算法与数据结构之字典(Dictionary)实例详解
Aug 20 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 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
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
通过jquery的$.getJSON做一个跨域ajax请求试验
2011/05/03 Javascript
jquery Validation表单验证使用详解
2020/09/12 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
2015/12/31 Javascript
ES6的新特性概览
2016/03/10 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
AngularJS ng-app 指令实例详解
2016/07/30 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
JS在if中的强制类型转换方式
2018/07/15 Javascript
简单两步使用node发送qq邮件的方法
2019/03/01 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[05:42]DOTA2英雄梦之声_第10期_蝙蝠骑士
2014/06/21 DOTA
Python中的特殊语法:filter、map、reduce、lambda介绍
2015/04/14 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python3获取拉勾网招聘信息的方法实例
2019/04/03 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
Python进行统计建模
2020/08/10 Python
python实现启动一个外部程序,并且不阻塞当前进程
2020/12/05 Python
python中append函数用法讲解
2020/12/11 Python
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
Carmen Sol官网:购买果冻鞋、手袋和配件
2021/01/01 全球购物
长曲棍球装备:Lacrosse Monkey
2020/12/02 全球购物
波兰办公用品和学校用品在线商店:Dlabiura24.pl
2020/11/18 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
庆中秋节主题活动方案
2014/02/03 职场文书
马云北大演讲完整版:真心话,什么才是阿里的核心竞争力?
2014/04/04 职场文书
企业务虚会发言材料
2014/10/20 职场文书
离职报告格式
2014/11/04 职场文书
导游词之新疆尼雅遗址
2019/10/16 职场文书
2022年四月新番
2022/03/15 日漫