jQuery 点击打印按钮使用window.print()方法打印。到打印页面后div内字体为25px,点击打印页面的取消按钮,回到首页字体恢复到之前的大小
时间: 2024-02-05 14:10:41 浏览: 89
可以通过监听 `window` 的 `beforeprint` 和 `afterprint` 事件,在打印页面前和打印页面后进行相应的处理。具体实现如下:
HTML 代码:
```html
<div id="content">
<h1>这是标题</h1>
<p>这是正文</p>
<button id="print-btn">打印</button>
</div>
```
JavaScript 代码:
```javascript
// 获取需要打印的内容元素
var content = document.getElementById('content');
// 监听打印事件
window.addEventListener('beforeprint', function() {
// 设置打印页面的 CSS 样式
content.style.fontSize = '25px';
});
window.addEventListener('afterprint', function() {
// 恢复页面的 CSS 样式
content.style.fontSize = '';
});
// 点击打印按钮触发打印事件
document.getElementById('print-btn').addEventListener('click', function() {
window.print();
});
```
在打印页面前,`beforeprint` 事件会被触发,此时我们可以设置打印页面需要的 CSS 样式;在打印页面后,`afterprint` 事件会被触发,此时我们可以将页面 CSS 样式恢复到之前的状态。
阅读全文