利用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验证表单第二部分
Nov 25 Javascript
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
在JavaScript中使用inline函数的问题
Mar 08 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
Apr 07 Javascript
Javascript 颜色渐变效果的实现代码
Oct 01 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
为jquery的ajaxfileupload增加附加参数的方法
Mar 04 Javascript
完美JQuery图片切换效果的简单实现
Jul 21 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
May 26 Javascript
基于JS判断对象是否是数组
Jan 10 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 Javascript
js实现拖拽与碰撞检测
Sep 18 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
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
Smarty变量调节器失效的解决办法
2014/08/20 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP删除字符串中非字母数字字符方法总结
2019/01/20 PHP
ThinkPHP5分页paginate代码实例解析
2020/11/10 PHP
jQuery 表格工具集
2010/04/25 Javascript
JavaScript游戏之优化篇
2010/11/08 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
javascript判断数组内是否重复的方法
2015/04/21 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
jquery.validate使用详解
2016/06/02 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
vuex2中使用mapGetters/mapActions报错的解决方法
2018/10/20 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
python模拟登录百度代码分享(获取百度贴吧等级)
2013/12/27 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python实现简单登陆系统
2018/10/18 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
解决pytorch下出现multi-target not supported at的一种可能原因
2021/02/06 Python
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
静态变量和实例变量的区别
2015/07/07 面试题
研究生自我鉴定范文
2013/10/30 职场文书
教师岗位职责范本
2013/12/29 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
幼儿园个人师德总结
2015/02/06 职场文书
PHP新手指南
2021/04/01 PHP
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS
Redis Lua脚本实现ip限流示例
2022/07/15 Redis