如何使用window.print
时间: 2025-08-10 21:56:23 浏览: 7
### 如何使用 `window.print` 方法进行页面打印
在 JavaScript 中,`window.print()` 是一个简单而有效的方法来触发浏览器的打印对话框。当调用此函数时,它会打开用户的默认打印机设置界面,允许用户选择要使用的打印机以及调整其他选项。
#### 基本语法
最简单的形式如下所示:
```javascript
window.print();
```
这段代码会在执行时立即显示打印对话框[^2]。
#### 控制哪些部分被打印
有时可能只希望打印网页中的特定区域而不是整个页面。为了实现这一点,可以创建一个新的窗口或 iframe 并将所需的内容复制到其中,然后再对该新环境调用 `print()` 函数。下面是一个例子说明如何仅打印某个 HTML 元素内的内容:
```html
<button onclick="printDiv('contentToPrint')">点击这里打印</button>
<div id="contentToPrint">
<!-- 要打印的内容 -->
</div>
<script type="text/javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
```
这种方法通过临时替换 body 的内联内容为指定 div 的内容实现了局部打印功能。
#### 处理打印前后的操作
如果需要在打印之前或之后执行某些逻辑处理,则可以通过监听相应的事件来进行编程控制。例如,在准备阶段隐藏不必要的 UI 组件或者保存当前状态;而在完成之后恢复这些更改等。
```javascript
// 监听 beforeprint 和 afterprint 事件
window.addEventListener('beforeprint', () => {
console.log('即将开始打印...');
});
window.addEventListener('afterprint', () => {
console.log('已完成打印');
});
```
以上就是关于如何利用 `window.print` 实现基本及高级场景下的页面打印介绍。
阅读全文
相关推荐




















