JS实现网页打印:代码示例与方法解析
5星 · 超过95%的资源 需积分: 10 160 浏览量
更新于2024-09-13
1
收藏 46KB DOC 举报
"这篇资源主要介绍了JavaScript实现网页打印的多种方法,包括隐藏不打印区域、指定打印区域以及创建新窗口进行打印。"
在Web开发中,JavaScript常常被用来实现一些用户交互功能,其中之一就是打印网页内容。以下是文章中提到的三种使用JavaScript进行网页打印的方法:
1. 指定不打印区域:
这种方法是通过CSS来控制,定义一个名为`.noprint`的类,将不需要打印的内容放入这个类中。在打印时,CSS媒体查询(`media=print`)将隐藏这些内容。例如:
```html
<style media="print" type="text/css">
.noprint { visibility: hidden }
</style>
<p class="noprint">这将不会被打印。</p>
```
用户点击打印链接后,浏览器只会打印没有`.noprint`类的元素。
2. 指定打印区域:
如果只需要打印页面中的特定部分,可以将这部分内容放在一个`<span>`或`<div>`中,并编写一个JavaScript函数来提取并打印这部分内容。例如:
```html
<span id="div1">这是要打印的内容。</span>
<a href="javascript:printme()" target="_self">打印</a>
<script language="javascript">
function printme() {
document.body.innerHTML = document.getElementById("div1").innerHTML + "<br/>" + document.getElementById("div2").innerHTML;
window.print();
}
</script>
```
函数`printme()`会替换整个页面的内容,只保留指定的`div1`和`div2`的内容,然后调用`window.print()`进行打印。
3. 创建新窗口打印:
当打印的页面布局与原始网页差异较大时,可以在点击打印按钮后打开一个新的窗口,将需要打印的内容加载到新窗口中,然后在新窗口调用`window.print()`。这种方式可以自定义页面样式和布局,更灵活地控制打印效果。例如:
```javascript
function printWindow() {
var printWin = window.open('', 'Print', 'width=600,height=400');
printWin.document.write('<html><head><title>打印内容</title>');
printWin.document.write('</head><body>');
printWin.document.write(document.getElementById('printArea').innerHTML);
printWin.document.write('</body></html>');
printWin.document.close(); // 必须先关闭文档,才能调用print
printWin.print();
setTimeout(function() { printWin.close(); }, 1000); // 打印完成后关闭窗口
}
```
在这个例子中,`printWindow`函数会打开一个新窗口,将ID为`printArea`的元素内容写入新窗口,然后打印,最后等待1秒后关闭窗口。
以上三种方法都是JavaScript实现网页打印的常见实践,可以根据实际需求选择合适的方式。在实际应用中,还可以结合CSS打印样式进行更细致的调整,如设置页边距、纸张方向等,以满足用户的打印需求。
2012-11-03 上传
2013-02-27 上传
2023-09-27 上传
2020-10-26 上传
2012-02-22 上传
2011-11-10 上传
歪小蝎
- 粉丝: 1
- 资源: 6
最新资源
- JHU荣誉单变量微积分课程教案介绍
- Naruto爱好者必备CLI测试应用
- Android应用显示Ignaz-Taschner-Gymnasium取消课程概览
- ASP学生信息档案管理系统毕业设计及完整源码
- Java商城源码解析:酒店管理系统快速开发指南
- 构建可解析文本框:.NET 3.5中实现文本解析与验证
- Java语言打造任天堂红白机模拟器—nes4j解析
- 基于Hadoop和Hive的网络流量分析工具介绍
- Unity实现帝国象棋:从游戏到复刻
- WordPress文档嵌入插件:无需浏览器插件即可上传和显示文档
- Android开源项目精选:优秀项目篇
- 黑色设计商务酷站模板 - 网站构建新选择
- Rollup插件去除JS文件横幅:横扫许可证头
- AngularDart中Hammock服务的使用与REST API集成
- 开源AVR编程器:高效、低成本的微控制器编程解决方案
- Anya Keller 图片组合的开发部署记录