利用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 08 Javascript
jQuery中校验时间格式的正则表达式小结
Sep 22 Javascript
解决jquery1.9不支持browser对象的问题
Nov 13 Javascript
js中使用replace方法完成某个字符的转换
Aug 20 Javascript
Jquery api 速查表分享
Jan 12 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
代码整洁之道(重构)
Oct 25 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 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
Yii2.0 Basic代码中路由链接被转义的处理方法
2016/09/21 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
iframe的onreadystatechange事件在firefox下的使用
2014/04/16 Javascript
js实现的点击div区域外隐藏div区域
2014/06/30 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
简单实现Bootstrap标签页
2020/08/09 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
Angularjs 事件指令详细整理
2017/07/27 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
jQuery 筛选器简单操作示例
2019/10/02 jQuery
在vue-cli3中使用axios获取本地json操作
2020/07/30 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python中Django发送带图片和附件的邮件
2017/03/31 Python
使用pandas将numpy中的数组数据保存到csv文件的方法
2018/06/14 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python生成验证码、计算具体日期是一年中的第几天实例代码详解
2019/10/16 Python
python滑块验证码的破解实现
2019/11/10 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
俄罗斯在线手表和珠宝商店:AllTime
2019/09/28 全球购物
关于.NET, HTML的五个问题
2012/08/29 面试题
公证处委托书
2015/01/28 职场文书
英语通知范文
2015/04/22 职场文书
《吃水不忘挖井人》教学反思
2016/02/22 职场文书
总结几个非常实用的Python库
2021/06/26 Python
CSS 伪元素::marker详解
2021/06/26 HTML / CSS
利用 SQL Server 过滤索引提高查询语句的性能分析
2021/07/15 SQL Server