利用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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
js判断60秒以及倒计时示例代码
Jan 24 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 Javascript
一个JavaScript用逗号分割字符串实例
Sep 22 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
神奇!js+CSS+DIV实现文字颜色渐变效果
Mar 16 Javascript
js学习阶段总结(必看篇)
Jun 16 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 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
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
解决File size limit exceeded 错误的方法
2013/06/14 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP中快速生成随机密码的几种方式
2017/04/17 PHP
BOOM vs RR BO3 第一场2.13
2021/03/10 DOTA
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
indexOf 和 lastIndexOf 使用示例介绍
2014/09/02 Javascript
jquery获取及设置outerhtml的方法
2015/03/09 Javascript
jquery mobile开发常见问题分析
2016/01/21 Javascript
基于bootstrap-datetimepicker.js不支持IE8的快速解决方法
2016/11/07 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
原生js实现简单的焦点图效果实例
2017/12/14 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
基于vue-upload-component封装一个图片上传组件的示例
2018/10/16 Javascript
浅谈Layui的eleTree树式选择器使用方法
2019/09/25 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
2020/07/28 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
python生成随机mac地址的方法
2015/03/16 Python
python生成器generator用法实例分析
2015/06/04 Python
python如何通过twisted实现数据库异步插入
2018/03/20 Python
在Python中使用filter去除列表中值为假及空字符串的例子
2019/11/18 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
力学专业毕业生自荐信
2013/11/17 职场文书
影视制作岗位职责
2013/12/04 职场文书
学习方法演讲稿
2014/05/10 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
医院志愿者活动总结
2015/05/06 职场文书