利用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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
javascript:void(0)的真正含义实例分析
Aug 20 Javascript
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
JavaScript 通过模式匹配实现重载
Aug 12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
JavaScript对象数组的排序处理方法
Oct 21 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
Vue.js中的图片引用路径的方式
Jul 28 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 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下安装配置fckeditor编辑器的方法
2011/03/02 PHP
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
jquery 回车事件实现代码
2011/08/23 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
NodeJS学习笔记之FS文件模块
2015/01/13 NodeJs
javascript生成大小写字母
2015/07/03 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
Angular.js中处理页面闪烁的方法详解
2017/03/09 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
JavaScript canvas绘制圆弧与圆形
2020/02/18 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
2020/12/10 Javascript
[04:44]DOTA2西游记战队视频彩蛋流出 师徒开黑巧遇林书豪
2016/08/03 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python web基础之加载静态文件实例
2018/03/20 Python
python使用生成器实现可迭代对象
2018/03/20 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
ECCO俄罗斯官网:北欧丹麦鞋履及皮具品牌
2020/06/26 全球购物
祖国在我心中演讲稿
2014/01/15 职场文书
《阳光》教学反思
2014/02/23 职场文书
个人简历自荐信
2014/06/26 职场文书
破坏寝室公物检讨书
2014/11/17 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
导游词之山东八仙过海景区
2019/11/11 职场文书
uwsgi+nginx代理Django无法访问静态资源的解决
2021/05/10 Servers
nginx配置虚拟主机的详细步骤
2021/07/21 Servers
浅析Python中的随机采样和概率分布
2021/12/06 Python
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫
Nginx利用Logrotate实现日志分割
2022/05/20 Servers