利用javascript实现web页面中指定区域打印_javascript技巧-js教程-PHP中文网

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

php中文网

发布： 2016-05-16 17:18:16

原创

1485人浏览过

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

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

BibiGPT-哔哔终结者

B站视频总结器-一键总结音视频内容

871

查看详情

复制代码代码如下:

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页面代码

复制代码代码如下:

课程表查询结果

本部分以下被打印

	星期一	星期二	星期三	星期四	星期五	星期六	星期日
1,2 节	大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业
3,4 节		大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业
5,6 节	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业	信息技术数信学院 501机房生物专业
7,8 节		大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业

本部分以上被打印

大家都在看：

Bokeh CustomJS实现DataTable列动态显示与隐藏 Bokeh教程：使用CustomJS动态控制DataTable列的可见性 JavaScript无数据库URL参数压缩编码实践指南 JavaScript中判断Input元素是否嵌套在特定CSS类容器内深入理解JavaScript操作符优先级、赋值与自增运算的执行顺序

	星期一	星期二	星期三	星期四	星期五	星期六	星期日
1,2 节	大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业
3,4 节		大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业
5,6 节	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业		大学信息技术课数信学院 501机房生物专业	信息技术数信学院 501机房生物专业
7,8 节		大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业	大学信息技术课数信学院 501机房生物专业