利用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 相关文章推荐
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
Mar 02 Javascript
JavaScript中判断函数是new还是()调用的区别说明
Apr 07 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
Apr 25 Javascript
微信小程序select下拉框实现效果
May 15 Javascript
vue 使用class创建和清除水印的示例代码
Dec 25 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
关于文本留言本的分页代码
2006/10/09 PHP
PHP中使用gettext解决国际化问题的例子(i18n)
2014/06/13 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php实现RSA加密类实例
2015/03/26 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
js动态切换图片的方法
2015/01/20 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
AngularJS 过滤与排序详解及实例代码
2016/09/14 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
react学习笔记之state以及setState的使用
2017/12/07 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
Vue 实现对quill-editor组件中的工具栏添加title
2020/08/03 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
详解python之协程gevent模块
2018/06/14 Python
python实现在线翻译功能
2020/03/03 Python
Python decimal模块使用方法详解
2020/06/08 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
Groupon荷兰官方网站:高达70%的折扣
2019/11/01 全球购物
女子职高个人自荐书
2014/02/01 职场文书
教师专业自荐信
2014/05/31 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
周末问候语大全
2015/11/10 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
离婚协议书格式范本
2016/03/18 职场文书
go xorm框架的使用
2021/05/22 Golang
go 实现简易端口扫描的示例
2021/05/22 Golang
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript