js打印去除页头
在JavaScript中，如果你想要打印网页内容但去除页头（通常指浏览器默认的打印样式中的页眉和页脚），可以通过CSS的@media print规则来实现。以下是一些基础概念和相关操作：
基础概念
- @media print：这是一个CSS媒体查询，用于定义当页面被打印或打印预览模式时的样式。
- page-break-before 和 page-break-after：这些CSS属性可以控制分页符的位置。
- visibility: hidden：可以隐藏不需要的元素。
相关优势
- 用户可以自定义打印样式，使得打印输出更加符合需求。
- 可以去除不必要的页面元素，如页眉、页脚、导航栏等，节省纸张。
类型
- 内联样式：直接在HTML元素中使用
style属性。 - 内部样式表：在HTML文件的
<head>部分使用<style>标签。 - 外部样式表：通过
<link>标签链接到外部CSS文件。
应用场景
- 打印网页内容时去除页眉和页脚。
- 打印特定的页面区域，忽略其他部分。
示例代码
以下是一个简单的示例，展示如何通过CSS去除页眉和页脚：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Example</title>
<style>
@media print {
/* 隐藏页眉和页脚 */
@page {
margin: 0; /* 设置页面边距为0 */
}
body {
margin: 1cm; /* 设置内容边距 */
}
/* 隐藏不需要打印的元素 */
.no-print {
display: none;
}
}
</style>
</head>
<body>
<header class="no-print">This is a header, it will not be printed.</header>
<div>
<h1>Main Content</h1>
<p>This is the main content that will be printed.</p>
</div>
<footer class="no-print">This is a footer, it will not be printed.</footer>
<button onclick="window.print()">Print</button>
</body>
</html>解释
- @media print：定义打印时的样式。
- @page { margin: 0; }：设置打印页面的边距为0，去除默认的页眉和页脚。
- body { margin: 1cm; }：设置内容区域的边距，确保内容不会紧贴纸张边缘。
- .no-print { display: none; }：隐藏带有
no-print类的元素，这些元素不会被打印。
注意事项
- 不同浏览器对打印样式的支持可能有所不同，建议在多个浏览器中进行测试。
- 如果需要更复杂的打印控制，可以考虑使用JavaScript库如
Print.js。
通过上述方法，你可以有效地控制打印输出，去除不需要的页眉和页脚，提升打印效果。
相关·内容
我正在尝试使用php导出报告。它在本地主机上运行良好，但当我在服务器上上传时，它将不能正常工作，并提供如下所示的输出。(我使用的所有未在这里显示的变量都声明为全局变量，因此在变量声明中不存在问题。)
$arrayissue = array();
$screenshot_name = '';
$cycle = $_S
浏览 3提问于2016-01-31得票数 0
回答已采纳
1回答
我在我的项目中使用windows.print()来打印页面。我使用Css来设计这个页面的样式，以去除正文边距和填充。但是IE等浏览器在打印设置中有默认的页边距。如何删除所有这些页边距？我想使用整个页面进行打印
浏览 3提问于2012-06-07得票数 0
回答已采纳
IE Edge中的套印格式在打印视图中是透明的。在其他浏览器中，背景是纯白的。
如何在IE Edge打印视图中将其设置为纯白背景？
浏览 0提问于2019-08-21得票数 0
使用幻影JS 1.9.7，我有问题，将我的网页打印成PDF格式。
背景色和图像不是完全匹配页面，而是按照：的要求去除背景色和图像。
浏览 11提问于2014-02-23得票数 7
回答已采纳
在System->Administration-> print中，当选择打印机属性时，我们有三个选项：“打印测试页”、“打印自测试页”和“干净的打印头”。
我在想他们的区别是什么？谢谢和问候！
浏览 0提问于2012-01-18得票数 3
回答已采纳
我在Word中打开一个文档(在Access中使用VBA )，然后在文本上做一些查找和替换以更新日期等，然后设置打印机托盘并发送到打印机(PrintOut)。这个部分工作得很好，但是客户端有一台Konica打印机，当我们将文档发送到TrayX时，它神秘地决定将纸张类型为“信笺”，此时打印机打印在纸张背面(嗯？)。这似乎是打印机的一个怪癖，但解决的办法是用纸质的“普通纸”打印。所以我想在调用"PrintOut“之前先设置纸张类型，但是我找不到任何方法来设置纸张类型
浏览 3提问于2013-11-21得票数 2
回答已采纳
1回答
我正在使用PHPExcel，我有下一期：
在我使用的模板中，我必须在某些单元格中打印当前页和总页，这会出现在行中的自定义页眉中，而不是标头本身，因为模板的复杂性。我知道，我可以在页眉和页脚中打印这些值，但是，是否可以在带有PHPExcel的单元格中打印当前页或总页呢？
浏览 7提问于2016-08-29得票数 0
2回答
在我的网站上，我有一个非常高的表格跨越多页打印。有没有一种方法可以让标题行在打印时显示在每一页的顶部？
浏览 0提问于2018-04-16得票数 0
回答已采纳
到目前为止，我只能获得浏览器化和因子包来生成包含所有js的单个文件(common.js) (就像普通的浏览器包一样)。/public/js/page1.js', './public/js/'));
这只会在公共/js中生成common.js文件，而page1和page2不是单独的文件(它们嵌入在common.js中)。预期结果
public&#
浏览 1提问于2014-08-13得票数 3
1回答
这一页包含两个列表，并排.在大多数情况下，这两个列表都可以放在一个页面上，但是如果它们中的任何一个溢出到下一个页面，那么我希望打印一个标题，显示"Continued...“和页码(这不是问题)。重述是否允许我在下一页打印标题，还是应该使用不同的方法？
浏览 2提问于2011-04-23得票数 2
回答已采纳
当我隐藏标题时它仍然从顶部留下一个空隙(空间)。如何消除间隙，使身体从页面的开头就会出现？public function writePage() $this->SetTopMargin(-50); $this->setPrintHeader(false); $this->setMargins(10, 50
浏览 0提问于2018-02-13得票数 0
回答已采纳
我的任务是打印html作为一份报告。我需要在报告的每一页中添加页眉和页脚。有没有人有一种可以将页面头/页脚添加到移动safari打印输出的每一页的工作技术？
浏览 3提问于2019-02-22得票数 3
回答已采纳
我需要打印病人检查结果的页面。我已经将空白带和信息带都设置为HeaderBand，但是QuickReport只接受第一个作为头。对于如何在页面顶部的每一页上打印另一个带，您有什么想法吗？
我的医生签名也有同样的问题，它应该出现在每一页<
浏览 11提问于2012-05-31得票数 0
回答已采纳
我有一个项目，在这个项目中，用户在登录后生成一个会话，这个会话在header.php中得到。<?php 这个文件是动态的，我把它放在一个包含在这个项目的页面中。<?php
include(&
浏览 4提问于2021-04-14得票数 0
回答已采纳
所以我想在标题标签中打印当前页面的名称。include 'includes/head.php';<head></head>我知道我可以通过在每个页面上放置$page变量来使它工作，但是我想防止这种情况发生。那么，有没有办法在不向每个页面添加任何内容的情况下，通过包含的h
浏览 1提问于2017-12-12得票数 0
回答已采纳
2回答
我正在尝试获得一个jQuery选择的选择/下拉列表，以便在启动箱模式中工作。我在一个标准的HTML页面上有几乎相同的代码，所以我想只要把我的列表弹出一个模式就可以了。我在模态中生成div并选择对象，然后在“显示”之后，我将其称为select： $(".chzn-select").chosen(); myApp.init();在这
浏览 10提问于2013-08-09得票数 5
回答已采纳
1回答
我有斑马ZT411标签打印机。我有一个203 had打印头，并将它改为300 had。我安装了ZT411 300 ZPL驱动程序。打印机现在正在错误地校准标签。
浏览 9提问于2022-05-05得票数 -1
1回答
我有一个非常大的HTML屏幕，当你打印时，打印超过16页，所以在打印预览中，你可以看到分页符。我尝试这样显示页码:第X页，共Y页<div id="footer">
<p>Page X of Y</p>
浏览 2提问于2015-04-08得票数 3
我正在制作一个打印页面，其中包含一个长表(垂直)，它显示的是某种stocklist，因此表的长度不是固定的。有时它打印10种股票，这意味着表的10行，有时甚至超过100行。这不是一个问题，如果它有10行，但如果超过10行，我想打印第二页。当时我想维护一些页面的区域(表单或图像)。
在这种情况下，我该怎么办？
浏览 2提问于2017-10-26得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
云直播活动推荐
腾讯云开发者
