利用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解密入门 最终变量劫持
Jun 25 Javascript
jQuery1.6 使用方法二
Nov 23 Javascript
5个javascript的数字格式化函数分享
Dec 07 Javascript
Jquery弹出层插件ThickBox的使用方法
Dec 09 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
Vue项目webpack打包部署到服务器的实例详解
Jul 17 Javascript
JS排序算法之冒泡排序,选择排序与插入排序实例分析
Dec 13 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
layui数据表格跨行自动合并的例子
Sep 02 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
Jul 31 Javascript
javascript操作向表格中动态加载数据
Aug 27 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开发微信支付的代码分享
2014/05/25 PHP
PHP微商城开源代码实例
2019/03/27 PHP
详解php反序列化
2020/06/10 PHP
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
详解jQuery插件开发方式
2016/11/22 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
2017/12/25 Javascript
Vue封装Swiper实现图片轮播效果
2018/02/06 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
python动态加载变量示例分享
2014/02/17 Python
初学Python实用技巧两则
2014/08/29 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
深入讲解Python函数中参数的使用及默认参数的陷阱
2016/03/13 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
Python urllib3软件包的使用说明
2020/11/18 Python
thinkphp5 路由分发原理
2021/03/18 PHP
CSS3中Transform动画属性用法详解
2016/07/04 HTML / CSS
HTML5本地存储之Database Storage应用介绍
2013/01/06 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
美国户外生活方式品牌:Eddie Bauer
2016/12/28 全球购物
人力资源管理专业应届生求职信
2013/09/28 职场文书
领导接待方案
2014/03/13 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
工商局个人工作总结
2015/03/03 职场文书
2019感恩宣传标语!
2019/07/05 职场文书
Python实现照片卡通化
2021/12/06 Python
分享Python获取本机IP地址的几种方法
2022/03/17 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server