javascript 使用 print.css 样式表删除打印时出现的元素

Removing elements that appear when printing, using print.css stylesheet

提问by Andrew Nguyen

Problem

问题

I'm currently using a stylesheet print.cssto remove elements and some styling to create a printer-friendly page, but I can't seem to remove four things that appear in the corners of the page, but are not in the HTML: pagination, date printed, title of page, URL of page

我目前正在使用样式表print.css来删除元素和一些样式来创建一个打印机友好的页面，但我似乎无法删除出现在页面角落但不在 HTML 中的四项内容：pagination, date printed, title of page,URL of page

Possible solution?

可能的解决方案？

I've seen this example from the LA Times that shows elements that are not in the HTML, but typically appear when printed being removed: http://graphics.latimes.com/oscar-bingo-2015/

我在洛杉矶时报看到过这个例子，它显示了不在 HTML 中的元素，但通常在打印时出现被删除：http: //graphics.latimes.com/oscar-bingo-2015/

采纳答案by Christian

There are quite a few posts on the subject here on StackOverflow:

StackOverflow 上有很多关于这个主题的帖子：

• Remove header and footer from window.print()
• Removing page title and date when printing web page (with CSS?)
• Can I remove the URL from my print css, so the web address doesn't print?
• How to remove the URL from the printing page?
• Disabling browser print options (headers, footers, margins) from page?

• 从 window.print() 中删除页眉和页脚
• 打印网页时删除页面标题和日期（使用 CSS？）
• 我可以从我的打印 css 中删除 URL，以便不打印网址吗？
• 如何从打印页面中删除 URL？
• 从页面禁用浏览器打印选项（页眉、页脚、边距）？

Looks like it works by using the @pagemedia propertyin combination with the print media property:

看起来它是通过将@pagemedia 属性与 print media 属性结合使用来工作的：

@media print {
    @page { margin: 0; }
  }

However, it only seems to work in Chrome (for the moment). Firefox can be madeto oblige, though. Elsewhere, it was suggested to create PDF on the fly - or to use JavaScript to set at least the page title to an empty string.

但是，它似乎只适用于 Chrome（目前）。不过，可以让Firefox服从。在其他地方，建议动态创建 PDF - 或使用 JavaScript 至少将页面标题设置为空字符串。

Also, I'd question why you'd want to hide something your users are usually used to have control over.

另外，我会质疑您为什么要隐藏用户通常习惯控制的内容。

To answer your question, though: The LA Times use bootstrap, which sets the page margin as follows:

不过，要回答您的问题：《洛杉矶时报》使用引导程序，它将页边距设置如下：

...@page{margin:.5cm}...

回答by Domino

That's some browser specific printed info. You can't change that, the user has to set its printing properties correctly.

那是一些浏览器特定的打印信息。您无法更改它，用户必须正确设置其打印属性。

See also: Removing page title and date when printing web page (with CSS?)

另请参阅：打印网页时删除页面标题和日期（使用 CSS？）

EDIT: this happens to be doable, but I have no idea how.

编辑：这恰好是可行的，但我不知道如何。