js打印控制页眉

在JavaScript中，控制页眉打印通常涉及到页面的样式调整，以确保在打印时只显示需要的内容。以下是一些基础概念和步骤，用于控制打印时的页眉显示：

基础概念

CSS媒体查询：使用@media print可以针对打印设备应用特定的样式。
打印样式表：可以创建一个单独的CSS文件，专门用于打印样式，然后在HTML中通过<link>标签引入。

类型

页面布局调整：隐藏不需要打印的元素，调整页面边距和字体大小。
页眉和页脚：自定义打印时的页眉和页脚内容。

应用场景

报告和文档：生成专业的报告或文档，只包含关键信息。
发票和凭证：打印发票或凭证时，确保只显示必要的信息。

示例代码

以下是一个简单的示例，展示如何使用JavaScript和CSS控制打印时的页眉：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Control Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="content">
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>
    </div>
    <button onclick="window.print()">Print</button>
</body>
</html>

CSS (styles.css)

/* General styles */
body {
    font-family: Arial, sans-serif;
}

.content {
    margin: 20px;
}

/* Print styles */
@media print {
    body {
        margin: 0;
    }
    .content {
        margin: 20px;
    }
    .no-print {
        display: none;
    }
    @page {
        margin: 20mm;
    }
    /* Custom header */
    .header {
        position: running header;
    }
    @top-center {
        content: element(header);
    }
}

JavaScript (可选)

如果需要动态生成页眉内容，可以使用JavaScript：

document.addEventListener("DOMContentLoaded", function() {
    var header = document.createElement("div");
    header.className = "header";
    header.innerHTML = "Custom Page Header";
    document.body.insertBefore(header, document.body.firstChild);
});

解决问题的方法

检查CSS媒体查询：确保@media print中的样式正确应用。
调试打印样式：使用浏览器的打印预览功能，检查哪些元素被隐藏或显示。
调整页面布局：确保打印时的页面布局符合预期，避免内容溢出或错位。

通过以上方法，可以有效地控制JavaScript打印时的页眉显示，提升打印输出的质量和用户体验。

页面内容是否对你有帮助？

有帮助

没帮助

打印不含其他内容(URL、日期等)的HTML页面

、、、

我想打印一个HTML页面的方式，没有任何额外的内容，如URL和日期。最好的方法是什么？

浏览 13提问于2013-04-10得票数 8

1回答

隐藏特定部分中的图像(水印)

我有一个设置为水印的图像，但它也出现在报告页脚部分中，该部分用作条款和条件页面，我不希望它出现在该部分中。我只是不知道语法/是否有指定报告的一个部分？

浏览 0提问于2017-10-12得票数 0

2回答

如何使用javascript调用系统打印函数

在我的asp.net应用程序中，我只是尝试使用java脚本打印一个网页，没有问题，我成功了。我使用了window .print函数。但是页面的url也被打印出来了，如何在打印页面的同时删除url？

浏览 1提问于2013-05-22得票数 1

2回答

如何隐藏从网站打印内容时显示在纸张底部的URL地址？

、、、、

有没有办法打印网页而不在打印页面的底部显示URL？或者，如果可能的话，隐藏显示在顶部的页码？

浏览 0提问于2010-01-25得票数 3

回答已采纳

2回答

如何在HTML，CSS和JavaScript中添加打印页眉和页脚？

、、、

我希望在每个打印页面中都有页眉和页脚，这样当您按Print时，每个页面都有相同的页脚和页眉。有没有办法使用web技术来做到这一点？我找不到太多关于打印的信息，除了换页等。

浏览 2提问于2011-07-12得票数 3

回答已采纳

4回答

使用css隐藏页脚中的URL

、、、

当我从internet explorer v11打印页面时，打印的文档包含客户端不想显示的网页的URL。我已经搜索了各种表格和文章来寻找解决方案，但努力都是徒劳的。

浏览 5提问于2019-09-30得票数 0

5回答

打印收据ASP.NET

、、

我目前正在做一个项目，我需要在收据打印机上打印出收据。目前，我使用CSS机制media=screen，media=print来指示要打印的内容。问题当然是页眉和页脚不能删除，因为它是特定于客户端浏览器的。所以我想知道有没有人对如何打印有其他的建议。最好不要使用太多的IO。

浏览 1提问于2009-04-01得票数 1

回答已采纳

2回答

如何更改或删除标题和页面地址？

、

我使用一些CSS样式来隐藏输入按钮，图像等等，但我想知道如何删除或更好:修改，在打印页面上显示的标题和页面地址的位置/内容？

浏览 1提问于2010-03-25得票数 0

回答已采纳

2回答

在所有页面中删除Chrome print PDF中的url

、

我想删除Chrome在打印页面上插入的页眉和页脚(url，页码)。下面只删除第一页上的页眉和页脚；如果内容流到第二页，页眉和页脚都会重新出现。@page { margin-top: 0cm;} 有没有办法删除所有打印页面上的打印页眉/页脚，而无需手动调整系统对话框选项“删除页眉/页脚”？

浏览 49提问于2019-06-03得票数 0

回答已采纳

2回答

使用PHP或jQuery打印网页

我有一个页眉，页脚和所有的网页。当我打印该页时，我还需要打印自定义页眉和页脚以及特定的页面大小。我应该怎么做才能做到这一点.. 哪一个更好。通过使用php或使用jquery插件。我想要对页面布局有更多的控制

浏览 1提问于2010-08-16得票数 0

回答已采纳

1回答

打印-css只打印正文内容。

、、

然后我想把它寄给打印机。但是，我只希望标签与必要的行提要一起打印，以充分推进标签滚动，以便可以打印下一个标签。我还没有尝试控制页面大小或强制创建一个新页面。我想先把数据打印在标签上，然后再修改剩下的。下面是我的html和print.css文件

浏览 6提问于2020-03-13得票数 0

回答已采纳

2回答

我想在演示文稿中设置页眉和页脚。我使用以下问题作为起点：和现在，据我所知，reveal.js默认使用，宽度为960px，高度为700 of。但是，我希望这个窗口中的页眉和页脚不被修复。他们需要适应实际的屏幕大小。也就是说，我希望左边的标题对齐到屏幕的左上角。同样，对于其他标题和页脚，也请参见图像。我怎样才能做到这一点？我在index.html 3.2.0中使用了以下代码( reveal.js ) <script sr

浏览 8提问于2016-01-10得票数 16

2回答

TCPDF -仅在某些页面上有页脚/页眉

$pdf->SetPrintHeader(true);$pdf->AddPage(); 但是，上述操作根本不会阻止打印页脚/页眉！

浏览 10提问于2011-12-15得票数 5

1回答

使用Codeigniter加载多个视图的最佳选项是什么？

、、、

我想从一个函数加载多个视图，将页面划分为三个部分index.php我要做的是：$this->load->view('index');但是在这里，如果我想添加一些jquery文件和footer.php，这在上面的代码中是不可能的。使用索引页面如下： <?p

浏览 1提问于2016-06-08得票数 2

回答已采纳

2回答

不带URL和日期的JavaScript print()

、、、、

我做了一个小的"CMS“，用于为一家公司撰写、管理和打印账单。账单以HTML文件的形式保存在服务器上。javascript代码是document.billFrame.print();。是否可以防止浏览器打印URL和日期？因为我知道这在JavaScript/CSS上可能是不可能的，有没有可能在Safari/Chrome或FF上安装一个浏览器插件或类似的东西？

浏览 1提问于2012-04-10得票数 0

回答已采纳

1回答

在打印屏幕中自定义页眉和页脚

、、、

我正在使用javascript中的打印功能，在打印屏幕的数据顶部，它显示了url，即localhost，在页脚上也显示了url。我想将页眉和页脚更改为其他内容、徽标和一些标题。如何才能做到这一点?我正在打印表，这是用于打印的函数的代码。printSection.innerHTML = ""; window.print(); } 如果你们能帮我修改页眉和页脚

浏览 69提问于2021-08-31得票数 0

1回答

如何在使用浏览器打印时修改浏览器添加的页眉和页脚

、

我想知道是否可以(在任何浏览器中)在打印时修改浏览器添加的页眉和页脚。我知道你可以通过调整@页边距来防止页面出现。但我希望能够更改页眉和页脚的文本。最重要的是，能够将字符串从类似基于web的技术的Javascript传递到浏览器(或浏览器的扩展)，这将调整页眉和页脚的值。我知道firefox允许添加自定义文本作为页眉和页脚，但如果有一个扩展使用JS或类似的方法传递字符串。

浏览 2提问于2016-12-10得票数 3

2回答