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 相关文章推荐
推荐:极酷右键菜单
Nov 29 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
jquery读写cookie操作实例分析
Dec 24 Javascript
分享两段简单的JS代码防止SQL注入
Apr 12 Javascript
javascript 秒表计时器实现代码
Mar 09 Javascript
微信小程序 实现列表项滑动显示删除按钮的功能
Apr 13 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
深入理解JavaScript和TypeScript中的class
Apr 22 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
vue实现商城秒杀倒计时功能
Dec 12 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+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
ie8本地图片上传预览示例代码
2014/01/12 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
AngularJS实现表单验证功能
2017/01/09 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
BootStrap daterangepicker 双日历控件
2017/06/02 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
2017/07/23 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
jQuery无冲突模式详解
2019/01/17 jQuery
JavaScript的Proxy可以做哪些有意思的事儿
2019/06/15 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
Python中有趣在__call__函数
2015/06/21 Python
python urllib爬取百度云连接的实例代码
2017/06/19 Python
python读取TXT每行,并存到LIST中的方法
2018/10/26 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python gensim使用word2vec词向量处理中文语料的方法
2019/07/05 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
解决使用Pandas 读取超过65536行的Excel文件问题
2020/11/10 Python
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
介绍一下#error预处理
2015/09/25 面试题
上海奥佳笔试题面试题
2016/11/16 面试题
品质口号大全
2014/06/17 职场文书
简单租房协议书范本
2014/08/20 职场文书
2014年民警工作总结
2014/11/25 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
致我们终将逝去的青春观后感
2015/06/10 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
2016年公共机构节能宣传周活动总结
2016/04/05 职场文书
Netty结合Protobuf进行编解码的方法
2021/06/26 Java/Android