從頁面禁用瀏覽器打印選項 (頁眉，頁腳，頁邊距)？

問題描述

我已經看到這個問題在 SO 和其他幾個網站上以幾種不同的方式提出，但是大多數都是太具體或 out-of-date 。我希望有人可以在這裏提供一個明確的答案，而不用揣測投機。

有沒有一種方法，使用 CSS 或 JavaScript，當有人在瀏覽器中打印時，更改默認打印機設置？當然，通過「瀏覽器打印」，我的意思是一些形式的 HTML，而不是 PDF 或其他一些 plug-in 依賴的 mime-type 。

請注意：

如果有些瀏覽器提供這些瀏覽器，而其他瀏覽器沒有 (或者如果你只知道如何為一些瀏覽器做)，我歡迎 browser-specific 解決方案。

同樣，如果您知道主流瀏覽器對 EVER 有特定限制，那麼這也是有幫助的，但是一些相當的 up-to-date 文檔將不勝感激。 (簡稱「違反 XYZ 的安全政策」)，XYZ 在過去三年對該政策作出重大改變時，並不十分有説服力) 。

最後，當我説「更改默認打印設置」時，我並不意味着永遠，只是為了我的頁面，我特意指出打印邊距，頁眉和頁腳。

我非常清楚，CSS 提供了更改頁面方向以及頁邊距的選項。許多鬥爭中的一個是使用 Firefox 。如果我將頁邊距設置為 1 英寸，則將其添加到已經放置的半英寸。

我非常希望減少我客户網站上 PDF 的使用情況，但是他們主要關注的是對演示文稿的侵害 (以及缺乏可靠性) 。

最佳解決方案

CSS 標準允許一些高級格式化。 CSS 中有一個 @page 指令，使得僅適用於分頁媒體 (如紙張) 的某些格式化。見 http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html 。

不利的是，不同瀏覽器的行為不一致。 Safari 仍然不支持設置打印機頁邊距，但所有其他主要瀏覽器現在都支持它。

使用 @page 指令，您可以指定頁面的打印機邊距 (與 HTML 元素的正常 CSS 邊距不同)：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF;
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Note that we basically disables the page-specific margins here to achieve the effect of removing the header and footer, so the margin we set on the body will not be used in page breaks (as commented by Konrad) This means that it will only work properly if the printed content is only one page.

這在 Firefox 3.6，IE 7，Safari 5.1.7 或 Google Chrome 4.1 中不起作用。

設置 @page 邊距在 IE 8，Opera 10，Google Chrome 21 和 Firefox 19 中都有效果。儘管在這些瀏覽器中您的內容的頁邊距設置正確，但是嘗試解決頭文件隱藏的行為並不理想/頁腳。

這是它在不同瀏覽器中的行為方式：

在 Internet Explorer 中，此打印設置中的邊距實際設置為 0mm，如果您進行了預覽，則默認為 0mm，但用户可以在預覽中進行更改。您將看到頁面內容實際上正確定位，但瀏覽器打印頁眉和頁腳顯示為 non-transparent 背景，因此有效地將頁面內容隱藏在該位置。
在 Firefox 較新的版本中，它的位置正確，但是顯示頁眉/頁腳文本和內容文本，因此它看起來像瀏覽器標題文本和頁面內容的混合。
在 Opera 中，頁面內容在標準 css 中使用 non-transparent 背景隱藏標題，並且頁眉/頁腳位置與內容衝突。非常好，但是如果邊距設置為導致標題部分可見的小值，則看起來很奇怪。頁邊距也不正確。
在 Chrome 較新的版本中，如果 @page 頁邊距設置如此小，以使頁眉/頁腳位置與內容衝突，則瀏覽器頁眉和頁腳將被隱藏。在我看來，這正是這個應該如何行事。

所以得出結論是 Chrome 在隱藏頁眉/頁腳方面有最好的實現。

次佳解決方案

任何最新版本的 Chrome 和 Opera，以及 Firefox 48 alpha 1 and greater

您可以將頁邊距設置為太小以避免包含文本的大小以禁用此選項 (借用 awe 的答案)：



@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

對於 Firefox up to 48 alpha 1 的版本

您可以將 mozNoMarginBoxes 屬性添加到<html> 標記，以防止 Firefox 添加到頁面邊距的 URL，頁碼和其他東西被打印。

它在 Firefox 29 及以上版本中工作。 You can see a screen shot of the difference here 或 see here for a live example.

請注意，示例中的 mozDisallowSelectionPrint 屬性不需要從邊距中刪除文本; 見 What does the mozdisallowselectionprint attribute in PDF.js do? 。

其它瀏覽器

不幸的是，似乎有知道在 Internet Explorer 中解決這個問題的方法，所以你不得不訴諸於 PDF 或者要求用户禁用保證金。

Safari 也是如此; 根據 @Luiz Perez 的評論，Safari(8,9.1 和 10) 的最新版本仍然不支持 @page 來抑制邊文本。

我在 Edge 上找不到任何東西，我沒有 Windows 10 安裝可供測試。

第三種解決方案

正如 @Awe 上面所説的，這是解決方案，這被證實在 Chrome 中工作！

只需確保這是標題標籤內的 INSIDE：

<head>
<style type="text/css" media="print">
    @page
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body
    {
        background-color:#FFFFFF;
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

第四種方案

安東尼，

不幸的是，這麼多人不明白你的問題。我有一個類似的請求，一個客户端想要刪除標題，頁碼和 html 頁腳。在這種情況下，客户端正在呈現可以正式證書加倍的 HTML 頁面。添加的 URL，頁面和標題不相關，並導致 less-than-pleasing 最終產品。在某些方面，它看起來很便宜。

Media = Print 無法禁用這些瀏覽器默認值。唯一的解決方法是告訴用户單擊”Gear” 按鈕並打開/關閉這些項目。真的，我不知道我可以做 20 年 (我們認為典型的用户會有一個線索點擊切換按鈕？) 。

如果 CSS 支持 Media = Print，它應該支持控制整個 end-user 打印體驗的能力。我欣賞瀏覽器提供了添加的字段，但是為什麼不允許 CSS 控制整個打印的 experience-if 是所需的。 90％的解決方案可能是 100％，還有三個領域！一個簡單的：

#BrowserPrintDefaults{display:none}

就夠了

再次，end-user 是否想要打印出來 (這可能是您的客户端非常私密，不希望打印的網址浮動)，或者也許一個執行團隊使用私人協作網站呢？很高興捍衞 end-user，但如果有人正在尋求答案，請不要回復説這是 end-user 展示或隱藏的權利。有時客户支付賬單的權利。

所以…. 沒有黑客註冊表或強制用户切換設置在打印預覽，任何人找到答案？

第五種方案

無法從 CSS 或 JavaScript 中暫時或永久地更改打印機設置，頁邊距或任何其他瀏覽器設置。

雖然這對您的真實要求是不幸的，但這些限制是 95％的網絡用户在其瀏覽器中啓用 JavaScript 的原因。 (Browser Statistics)

第六種方案

嘗試這段代碼，為我工作 100％：FOR Landscape：

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

FOR Portait：

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

參考文獻

Disabling browser print options (headers, footers, margins) from page?

注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

從頁面禁用瀏覽器打印選項 (頁眉，頁腳，頁邊距)？