利用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 Event学习第七章 事件属性
Feb 07 Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
jQuery封装的获取Url中的Get参数示例
Nov 26 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
Sep 24 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
JS+DIV实现鼠标划过切换层效果的方法
May 25 Javascript
jQuery实现下拉加载功能实例代码
Apr 01 Javascript
js实现自动播放匀速轮播图
Feb 06 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
基于mysql的bbs设计(一)
2006/10/09 PHP
关于Intype一些小问题的解决办法
2008/03/28 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
php 的反射详解及示例代码
2016/08/25 PHP
PHP实现git部署的方法教程
2017/12/19 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
表单提交验证类
2006/07/14 Javascript
JQuery 学习笔记 选择器之一
2009/07/23 Javascript
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
js实现用户离开页面前提示是否离开此页面的方法(包括浏览器按钮事件)
2015/07/18 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
js中new一个对象的过程
2017/02/20 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
js实现随机数小游戏
2019/06/28 Javascript
[04:29]2014DOTA2国际邀请赛 主赛事第三日TOPPLAY
2014/07/21 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python面向对象类继承和组合实例分析
2018/05/28 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
详解CSS3新增的背景属性
2019/12/25 HTML / CSS
Marks & Spencer爱尔兰:英国马莎百货
2016/04/20 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
什么是lambda函数
2013/09/17 面试题
计算机专业毕业生求职信分享
2013/12/24 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
横幅标语大全
2014/06/17 职场文书
房产销售独家委托书范本
2014/10/01 职场文书
安阳殷墟导游词
2015/02/10 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
门店店长岗位职责
2015/04/14 职场文书
教师读书活动心得体会
2016/01/14 职场文书
PHP中strval()函数实例用法
2021/06/07 PHP
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫