利用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 链式延迟执行DOME
Jan 04 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
使用javascript控制cookie显示和隐藏背景图
Feb 12 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
js中的json对象详细介绍
Oct 29 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
May 30 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 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
生成sessionid和随机密码的例子
2006/10/09 PHP
php下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php Smarty 字符比较代码
2011/02/27 PHP
PHP常用技巧总结(附函数代码)
2012/02/04 PHP
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
按钮接受回车事件的三种实现方法
2014/06/06 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
JS常用正则表达式总结【经典】
2017/05/12 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
js实现3D照片墙效果
2019/10/28 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
Python图算法实例分析
2016/08/13 Python
python三引号输出方法
2019/02/27 Python
Python实现最常见加密方式详解
2019/07/13 Python
基于python实现学生信息管理系统
2019/11/22 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
2013/12/11 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
FILA德国官方网站:来自意大利的体育和街头服饰品牌
2019/07/19 全球购物
伦敦新晋轻奢耳饰潮牌:Tada & Toy
2020/05/25 全球购物
【魔兽争霸3重制版】原版画面与淬火MOD画面对比
2021/03/26 魔兽争霸
服装机修工岗位职责
2013/12/26 职场文书
中学生差生评语
2014/01/30 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
四风问题自查自纠工作情况报告
2014/10/28 职场文书
毕业生自荐信范文
2015/03/05 职场文书
负责培养人意见
2015/06/05 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书