從頁面停用瀏覽器列印選項 (頁首，頁尾，頁邊距)？

問題描述

我已經看到這個問題在 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 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。

從頁面停用瀏覽器列印選項 (頁首，頁尾，頁邊距)？