js 打印 去掉页眉页脚
在 JavaScript 中，如果你想要打印网页内容并且去掉页眉页脚，可以通过设置浏览器的打印样式来实现。这通常涉及到 CSS 的 @media print 规则，你可以利用这个规则来隐藏不需要打印的元素，比如页眉和页脚。
以下是一个简单的示例，展示如何通过 CSS 来隐藏页眉和页脚：
@media print {
/* 隐藏页眉 */
.header {
display: none;
}
/* 隐藏页脚 */
.footer {
display: none;
}
/* 可选：设置页面边距 */
@page {
margin: 0;
}
}在你的 HTML 文件中，确保页眉和页脚的元素有相应的类名，例如：
<header class="header">
<!-- 页眉内容 -->
</header>
<main>
<!-- 页面主要内容 -->
</main>
<footer class="footer">
<!-- 页脚内容 -->
</footer>当你调用 window.print() 方法时，浏览器会应用上述的打印样式，从而在打印预览和实际打印时隐藏页眉和页脚。
如果你想要通过 JavaScript 动态地控制打印样式，你可以创建一个 <style> 元素并将其添加到文档中：
function printWithoutHeaderFooter() {
// 创建一个<style>元素
var style = document.createElement('style');
style.type = 'text/css';
style.media = 'print';
// 添加CSS规则
style.innerHTML = `
.header, .footer { display: none; }
@page { margin: 0; }
`;
// 将<style>元素添加到<head>中
document.head.appendChild(style);
// 调用打印
window.print();
// 打印完成后移除<style>元素
document.head.removeChild(style);
}
// 调用函数进行打印
printWithoutHeaderFooter();请注意，不同的浏览器可能会有不同的打印设置和默认样式，因此可能需要针对特定浏览器进行调整。此外，用户仍然可以在浏览器的打印设置中手动添加页眉和页脚，因此这种方法并不能完全保证去除所有的页眉和页脚。
相关·内容
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
