利用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 分栏效果实现代码
Aug 29 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
JavaScript中的object转换函数toString()与valueOf()介绍
Dec 31 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
原生js实现简单的Ripple按钮实例代码
Mar 24 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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
咖啡与牛奶
2021/03/03 冲泡冲煮
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
JS 对输入框进行限制(常用的都有)
2013/07/30 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
JavaScript让网页出现渐隐渐显背景颜色的方法
2015/04/21 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
angular.js之路由的选择方法
2016/09/24 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
JavaScript函数IIFE使用详解
2019/10/21 Javascript
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
HTML5播放实现rtmp流直播
2020/06/16 HTML / CSS
一套英文Java笔试题面试题
2016/04/21 面试题
Java面试笔试题大全
2016/11/23 面试题
教师工作态度自我评价
2015/03/05 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
创业计划书之旅游网站
2019/09/06 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP
Django基础CBV装饰器和中间件
2022/03/22 Python
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis