如何在使用window.print时隐藏页面的页眉和页脚链接并且保留页码?
时间: 2024-10-25 20:05:16 浏览: 11
在Windows打印时,如果你想隐藏页面的页眉和页脚以及链接,同时保留页码,你可以通过JavaScript或者CSS来控制打印样式。以下是一些建议:
1. **使用CSS**:
- 你可以创建一个单独的`print.css`文件,并针对打印媒体设置样式。在其中,添加以下CSS规则:
```css
@media print {
header, footer, .footer-link {
display: none; /* 隐藏页眉和页脚 */
}
.no-print { /* 只对打印生效的类 */
visibility: hidden;
}
.print-pagination {
display: inline-block; /* 保留页码 */
}
}
```
然后在HTML中,给页眉、页脚元素和链接添加这个类:
```html
<header class="no-print">...</header>
<footer class="no-print">...</footer>
<a href="#" class="footer-link no-print">链接</a>
```
2. **JavaScript (仅限IE浏览器支持)**:
对于不支持CSS `@media print`的旧版浏览器,如Internet Explorer,你可以使用JavaScript动态修改打印范围,例如:
```javascript
function hidePrintElements() {
var elements = document.querySelectorAll('header, footer, a.footer-link');
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = 'none';
}
var pagination = document.getElementById('print-pagination'); // 假设页码在ID为print-pagination的元素中
pagination.style.display = '';
}
window.onload = function() {
if (window.location.search.indexOf('print') > -1) {
hidePrintElements();
}
};
```
这段代码会在页面加载时检查URL是否有打印参数,如果有则隐藏需要隐藏的元素。
请确保将上述代码替换为你实际HTML结构中的相应部分,并根据需要调整类名。
阅读全文