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 相关文章推荐
jquery选择器的选择使用及性能介绍
Jan 16 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
Jun 18 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
Vue微信项目按需授权登录策略实践思路详解
May 07 Javascript
使用nvm和nrm优化node.js工作流的方法
Jan 17 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 Javascript
javaScript Array api梳理
Mar 31 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
微信小程序封装分享与分销功能过程解析
2019/08/13 Javascript
如何对react hooks进行单元测试的方法
2019/08/14 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
python简单分割文件的方法
2015/07/30 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
利用python将图片转换成excel文档格式
2017/12/30 Python
Python+matplotlib实现填充螺旋实例
2018/01/15 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
Python求解正态分布置信区间教程
2019/11/20 Python
如何提高python 中for循环的效率
2020/04/15 Python
jupyter实现重新加载模块
2020/04/16 Python
python进行OpenCV实战之画图(直线、矩形、圆形)
2020/08/27 Python
Python基于execjs运行js过程解析
2020/11/27 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
初婚初育证明范本
2014/11/24 职场文书
安全责任书
2015/01/29 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
MySQL 语句执行顺序举例解析
2022/06/05 MySQL