利用javascript实现web页面中指定区域打印


Posted in Javascript onOctober 30, 2013

最近做到了web页面课程表打印时,上网找了一些资料,最后使用了下面的方法实现了我需要的功能。将需要打印的课程表的table放入div标签中,然后指定出需要打印的区域,最后调用window.print打印指定内容。

示例代码(代码中有些内容已省略)

function preview() {
    bdhtml = window.document.body.innerHTML;
    sprnstr = "<!--startprint-->";
    eprnstr = "<!--endprint-->";
    prnhtml = bdhtml.substr(bdhtml.indexOf(sprnstr) + 17);
    prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr));
    window.document.body.innerHTML = prnhtml;
    window.print();
}

上面的是javascript代码,下面是html页面代码
        <div class="print">
            <input   type= "button" value= "打印课表" onclick= "preview()"/>
        </div>
        <div class="result">
            课程表查询结果
        </div>
<center>本部分以下被打印</center>
        <!--startprint-->
        <div class="timetable">
            <table id="table1" class ="tableresult"style="margin-left :auto;margin-right:auto;">
                <tr >
                    <th> </th>
                    <th>星期一</th>
                    <th>星期二</th>
                    <th>星期三</th>
                    <th>星期四</th>
                    <th>星期五</th>
                    <th>星期六</th>
                    <th>星期日</th>
                </tr>
                <tr >
                    <th> 1,2 节</th>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr >
                    <th> 3,4 节</th>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr >
                    <th> 5,6 节</th>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>信息技术<br>数信学院<br>501机房<br>生物专业</td>
                </tr>
                <tr >
                    <th> 7,8 节</th>
                    <td></td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td>大学信息技术课<br>数信学院<br>501机房<br>生物专业</td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
         <!--endprint-->
<center>本部分以上被打印</center>
Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
JS实现的倒计时效果实例(2则实例)
Dec 23 Javascript
jQuery UI库中dialog对话框功能使用全解析
Apr 23 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
详解node.js中的npm和webpack配置方法
Jan 21 Javascript
详解JSON和JSONP劫持以及解决方法
Mar 08 Javascript
javascript ajax 仿百度分页函数
Oct 29 #Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 #Javascript
javaScript实现浮点数转十六进制字符
Oct 29 #Javascript
JavaScript显示当然日期和时间即年月日星期和时间
Oct 29 #Javascript
js动态设置div的值下例子
Oct 29 #Javascript
Jquery 复选框取值兼容FF和IE8(测试有效)
Oct 29 #Javascript
Js获取数组最大和最小值示例代码
Oct 29 #Javascript
You might like
全国FM电台频率大全 - 9 上海市
2020/03/11 无线电
PHP 变量定义和变量替换的方法
2009/07/30 PHP
Linux系统递归生成目录中文件的md5的方法
2015/06/29 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
将nodejs打包工具整合到鼠标右键的方法
2013/05/11 NodeJs
jquery 为a标签绑定click事件示例代码
2014/06/23 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
JS SetInterval 代码实现页面轮询
2017/08/11 Javascript
jQuery实现简单日期格式化功能示例
2017/09/19 jQuery
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
详解Python中for循环的使用
2015/04/14 Python
简单谈谈Python的pycurl模块
2018/04/07 Python
python logging重复记录日志问题的解决方法
2018/07/12 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Flask框架路由和视图用法实例分析
2019/11/07 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
html5的画布canvas——画出简单的矩形、三角形实例代码
2013/06/09 HTML / CSS
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
毕业生教师求职信
2013/10/20 职场文书
广告语设计及教案
2014/03/21 职场文书
健康家庭事迹材料
2014/05/02 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年车间工作总结
2014/11/21 职场文书
修改MySQL的数据库引擎为INNODB的方法
2021/05/26 MySQL
DjangoRestFramework 使用 simpleJWT 登陆认证完整记录
2021/06/22 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
SQLServer中exists和except用法介绍
2021/12/04 SQL Server
Python实现双向链表
2022/05/25 Python