利用javascript实现web页面中指定区域打印

2020-05-13 我要评论

最近做到了web页面课程表打印时，上网找了一些资料，最后使用了下面的方法实现了我需要的功能。将需要打印的课程表的table放入div标签中，然后指定出需要打印的区域，最后调用window.print打印指定内容。

示例代码（代码中有些内容已省略）

function preview() {
 bdhtml = window.document.body.innerHTML;
 sprnstr = "";
 eprnstr = "";
 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>
 
 <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>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td></td>
 </tr>
 <tr >
 <th> 3,4 节</th>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td></td>
 </tr>
 <tr >
 <th> 5,6 节</th>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>信息技术 数信学院 501机房 生物专业</td>
 </tr>
 <tr >
 <th> 7,8 节</th>
 <td></td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td>大学信息技术课 数信学院 501机房 生物专业</td>
 <td></td>
 <td></td>
 </tr>
 </table>
 </div>
 
<center>本部分以上被打印</center>

利用javascript实现web页面中指定区域打印

相关文章

猜您喜欢

今日热门