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 相关文章推荐
更正确的asp冒泡排序
May 24 Javascript
css把超出的部分显示为省略号的方法兼容火狐
Jul 23 Javascript
javascript中使用css需要注意的地方小结
Sep 01 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
Dec 13 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
jQuery+CSS3实现点赞功能
Mar 13 Javascript
详解Vue 非父子组件通信方法(非Vuex)
May 24 Javascript
使用微信小程序开发弹出框应用实例详解
Oct 18 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 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-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php中explode函数用法分析
2014/11/15 PHP
php计算指定目录下文件占用空间的方法
2015/03/13 PHP
浅谈php7的重大新特性
2015/10/23 PHP
php使用crypt()函数进行加密
2017/06/08 PHP
PHP预定义超全局数组变量小结
2018/08/20 PHP
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
javascript中this的四种用法
2015/05/11 Javascript
JS实现模拟风力的雪花飘落效果
2015/05/13 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
微信小程序实现商品属性联动选择
2019/02/15 Javascript
Vue实现类似Spring官网图片滑动效果方法
2019/03/01 Javascript
js canvas实现5张图片合成一张图片
2019/07/15 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue 根据选择的月份动态展示日期对应的星期几
2021/02/06 Vue.js
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
Python 通过微信控制实现app定位发送到个人服务器再转发微信服务器接收位置信息
2019/08/05 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
AmazeUI 折叠面板的实现代码
2020/08/17 HTML / CSS
Bally澳大利亚官网:瑞士奢侈品牌
2018/11/01 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
函授生自我鉴定
2014/03/25 职场文书
审计班子对照检查材料
2014/08/27 职场文书
2014年节能减排工作总结
2014/12/06 职场文书
党员心得体会范文2016
2016/01/23 职场文书
自考生自我评价
2019/06/21 职场文书