利用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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
Bootstrap实现下拉菜单多级联动
Nov 23 Javascript
利用JS判断客户端类型你应该知道的四种方法
Dec 22 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
Vue数据绑定实例写法
Aug 06 Javascript
express框架中使用jwt实现验证的方法
Aug 25 Javascript
js实现多图和单图上传显示
Dec 18 Javascript
vue实现锚点定位功能
Jun 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
ftp类(myftp.php)
2006/10/09 PHP
逆序二维数组插入一元素的php代码
2012/06/08 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
php 生成短网址原理及代码
2014/01/23 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
php实现的双向队列类实例
2014/09/24 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
自制PHP框架之路由与控制器
2017/05/07 PHP
用javascript getComputedStyle获取和设置style的原理
2008/10/10 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
Javascript连接多个数组不用concat来解决
2014/03/24 Javascript
js比较日期大小的方法
2015/05/12 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
Vue对象赋值视图不更新问题及解决方法
2019/06/03 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
Python转码问题的解决方法
2008/10/07 Python
Python格式化压缩后的JS文件的方法
2015/03/05 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
Python过滤掉numpy.array中非nan数据实例
2020/06/08 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
sklearn中的交叉验证的实现(Cross-Validation)
2021/02/22 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
父母对孩子说的话
2014/04/12 职场文书
个人遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年办公室文秘工作总结
2014/12/09 职场文书
2016年党建工作简报
2015/11/26 职场文书
JS函数式编程实现XDM一
2022/06/16 Javascript