window.print
时间: 2025-01-14 10:30:48 浏览: 37
### JavaScript `window.print()` 方法使用教程
#### 一、基础介绍
`window.print()` 是浏览器内置的方法,用于打印当前窗口中的文档内容。当调用该方法时,会触发浏览器的打印对话框,允许用户调整打印机设置并执行打印操作[^1]。
#### 二、基本用法
最简单的应用方式是在需要的地方直接调用 `window.print()` 函数即可:
```javascript
// 当点击按钮或其他事件发生时触发打印
document.getElementById('printButton').addEventListener('click', function () {
window.print();
});
```
这段代码会在用户单击具有指定 ID 的按钮时启动打印流程[^4]。
#### 三、自定义打印范围
有时仅需打印页面上的部分内容而非全部,在这种情况下可以通过创建临时 iframe 或者修改 DOM 结构的方式来限定要被打印的部分。下面是一个针对特定 HTML 元素进行打印的例子[^2]:
```javascript
function printElement(elementId) {
var originalContents = document.body.innerHTML;
var elementToPrint = document.getElementById(elementId).innerHTML;
// 替换 body 内容为待打印部分
document.body.innerHTML = elementToPrint;
// 执行打印命令
window.print();
// 恢复原始页面状态
document.body.innerHTML = originalContents;
}
```
需要注意的是上述做法可能会破坏页面布局,因此建议在实际项目中考虑更优雅的方式处理这个问题,比如通过 CSS 控制可见性或利用媒体查询专门定制打印样式表[^3]。
#### 四、长列表分页打印
对于含有大量数据项(如表格)的情况,默认行为可能无法很好地满足需求。为了确保每一页都能合理展示信息量而不至于过载,应该采取措施优化输出效果。一种常见策略就是手动插入分页符 `<div style="page-break-after: always;"></div>` 来指示哪些地方适合断开成新页。
```css
@media print {
.page-break { page-break-after: always; }
}
<!-- 在适当位置添加此类 -->
<div class="page-break"></div>
```
这样可以在不影响屏幕显示的情况下指导打印机如何分割内容到不同纸张上。
阅读全文
相关推荐


















