利用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 相关文章推荐
JQuery SELECT单选模拟jQuery.select.js
Nov 12 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
使用jquery制作弹出框效果
Apr 03 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
Jan 04 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
前端页面文件拖拽上传模块js代码示例
May 19 Javascript
浅谈Angular6的服务和依赖注入
Jun 27 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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
PHP生成HTML静态页面实例代码
2008/08/31 PHP
php中$this-&amp;gt;含义分析
2009/11/29 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
php命令行模式代码实例详解
2021/02/26 PHP
循环 vs 递归浅谈
2013/02/28 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
2013/12/29 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
详解vue-router基本使用
2017/04/18 Javascript
vue-router实现tab标签页(单页面)详解
2017/10/17 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
vue使用better-scroll实现滑动以及左右联动
2020/06/30 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[33:33]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第二场 11.27
2020/11/30 DOTA
python实现监控windows服务并自动启动服务示例
2014/04/17 Python
全面了解python字符串和字典
2016/07/07 Python
python自动登录12306并自动点击验证码完成登录的实现源代码
2018/04/25 Python
python 读取txt中每行数据,并且保存到excel中的实例
2018/04/29 Python
Python 统计字数的思路详解
2018/05/08 Python
python变量的存储原理详解
2019/07/10 Python
python实现快递价格查询系统
2020/03/03 Python
Python实现转换图片背景颜色代码
2020/04/30 Python
利用python+ffmpeg合并B站视频及格式转换的实例代码
2020/11/24 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
聚美优品的广告词
2014/03/14 职场文书
开业主持词
2014/03/21 职场文书
诉前财产保全担保书
2014/05/20 职场文书
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis