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 空位补零实现代码
Feb 26 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
eclipse导入jquery包后报错的解决方法
Feb 17 Javascript
JS使用getComputedStyle()方法获取CSS属性值
Apr 23 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
angular ng-repeat数组中的数组实例
Feb 18 Javascript
vuejs2.0实现一个简单的分页示例
Feb 22 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue项目中用cdn优化的方法
Jan 03 Javascript
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
js实现消灭星星(web简易版)
Mar 24 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中动态显示签名和ip原理
2007/03/28 PHP
php+mysql不用递归实现的无限级分类实例(非递归)
2014/07/08 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
Yii2框架操作数据库的方法分析【以mysql为例】
2019/05/27 PHP
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
2010/11/25 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
2012/09/30 Javascript
jquery DIV撑大让滚动条滚到最底部代码
2013/06/06 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
JavaScript对象封装的简单实现方法(3种方法)
2017/01/03 Javascript
div实现自适应高度的textarea实现angular双向绑定
2017/01/08 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
微信小程序仿微信运动步数排行(交互)
2018/07/13 Javascript
微信小程序适配iphoneX的实现方法
2018/09/18 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
vue实现设置载入动画和初始化页面动画效果
2019/10/28 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
python编程开发之类型转换convert实例分析
2015/11/13 Python
通过pycharm使用git的步骤(图文详解)
2019/06/13 Python
Django实现微信小程序的登录验证功能并维护登录态
2019/07/04 Python
30秒学会30个超实用Python代码片段【收藏版】
2019/10/15 Python
python使用itchat模块给心爱的人每天发天气预报
2019/11/25 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
基于python实现简单C/S模式代码实例
2020/09/14 Python
Python通过len函数返回对象长度
2020/10/22 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
护理中职生求职信范文
2014/02/24 职场文书
三问三解心得体会
2014/09/05 职场文书
写给父母的感谢信
2015/01/22 职场文书
佛光寺导游词
2015/02/10 职场文书
python的列表生成式,生成器和generator对象你了解吗
2022/03/16 Python