Javascript 打印网页时删除页面标题和日期（使用 CSS？）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2573603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing page title and date when printing web page (with CSS?)
提问by swisstony
By default, when you print a web page, the page titleand and URLare printed at the top of the page, and likewise the dateand timeare printed at the bottom.
默认情况下，当您打印网页时，页面标题和URL打印在页面顶部，同样日期和时间打印在底部。
It is possible to remove this additional as you are printing through the PAGE SETUP menu (under FILE in Internet Exp)
当您通过 PAGE SETUP 菜单（在 Internet Exp 中的 FILE 下）打印时，可以删除此附加项
Does anyone know of a way of doing this via CSS or javascript?
有谁知道通过 CSS 或 javascript 做到这一点的方法吗？
回答by greim
Historically, it's been impossible to make these things disappear as they are user settings and not considered part of the page you have control over.
从历史上看，让这些东西消失是不可能的，因为它们是用户设置，不被视为您可以控制的页面的一部分。
However, as of 2017, the @pageat-rulehas been standardized, which can be used to hide the page title and date in modern browsers:
但是，截至 2017 年，@pageat-rule已标准化，可用于在现代浏览器中隐藏页面标题和日期：
@page { size: auto; margin: 0mm; }
Print headers/footers and print margins
When printing Web documents, margins are set in the browser's Page Setup (or Print Setup) dialog box. These margin settings, although set within the browser, are controlled at the operating system/printer driver level and are not controllable at the HTML/CSS/DOM level. (For CSS-controlled printed page headers and footers see Printing Headers .)
The settings must be big enough to encompass the printer's physical non-printing areas. Further, they must be big enough to encompass the header and footer that the browser is usually configured to print (typically the page title, page number, URL and date). Note that these headers and footers, although specified by the browser and usually configurable through user preferences, are not part of the Web page itself and therefore are not controllable by CSS. In CSS terms, they fall outside the Page Box CSS2.1 Section 13.2.
打印 Web 文档时，在浏览器的页面设置（或打印设置）对话框中设置边距。这些边距设置虽然在浏览器中设置，但在操作系统/打印机驱动程序级别进行控制，在 HTML/CSS/DOM 级别无法控制。（对于 CSS 控制的打印页眉和页脚，请参阅打印页眉。）
设置必须足够大以包含打印机的物理非打印区域。此外，它们必须足够大以包含浏览器通常配置为打印的页眉和页脚（通常是页面标题、页码、URL 和日期）。请注意，这些页眉和页脚虽然由浏览器指定并且通常通过用户首选项进行配置，但它们不是网页本身的一部分，因此不受 CSS 控制。在 CSS 术语中，它们不属于页面框 CSS2.1 第 13.2 节。
... i.e. setting a margin of 0 hides the page title because the title is printed in the margin.
... 即将页边距设置为 0 会隐藏页面标题，因为标题打印在页边距中。
Credit to Vigneswaran Sfor this tip.
感谢Vigneswaranš此提示。
回答by Vigneswaran S
Its simple. Just use css.
这很简单。只需使用css。
<style>
@page { size: auto; margin: 0mm; }
</style>
回答by Kai Noack
A possible workaround for the page title:
页面标题的可能解决方法：
- Provide a print button,
- catch the onclick event,
- use javascript to change the page title,
- then execute the print command via javascript as well.
- 提供打印按钮，
- 捕捉 onclick 事件，
- 使用javascript更改页面标题，
- 然后也通过javascript执行打印命令。
document.title = "Print page title"; window.print();
document.title = "Print page title"; window.print();
This should work in every browser.
这应该适用于每个浏览器。
回答by mtchuente
You can add this in your stylesheet: @page{size:auto; margin:5mm;}But this discards the page number too
您可以在样式表中添加它：@page{size:auto; margin:5mm;}但这也会丢弃页码
回答by Lucke
completing Kai Noack's answer, I would do this:
完成 Kai Noack 的回答，我会这样做：
var originalTitle = document.title;
document.title = "Print page title";
window.print();
document.title = originalTitle;
this way once you print page, This will return to have its original title.
这样一旦你打印页面，这将恢复到原来的标题。
回答by Lucke
There's a facility to have a separate style sheet for print, using
有一个工具可以打印一个单独的样式表，使用
<link type="text/css" rel="stylesheet" media="print" href="print.css">
I don't know if it does what you want though.
我不知道它是否符合您的要求。
