首頁 > web前端 > css教學 > 為什麼無法列印 HTML 格式的頁碼以及解決方法是什麼?

為什麼無法列印 HTML 格式的頁碼以及解決方法是什麼?

Susan Sarandon
發布: 2024-12-14 14:47:11
原創
667 人瀏覽過

Why Can't I Print Page Numbers in HTML and What's the Workaround?

無法在 HTML 頁面上列印頁碼?

問題描述:

儘管進行了大量研究,頁碼還是失敗列印 HTML 文件時出現。

CSS 程式碼使用:

@page {
  margin: 10%;
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
登入後複製

在 @media all 區塊內部和外部都嘗試了 @page 規則,但沒有成功。

解:

由於網頁瀏覽器的限制,使用@page實作頁碼是不可行的。 Oliver Kohll 提供了另一個解決方案,它利用 CSS中基於表格的格式,而不依賴於@page:

CSS:

#content {
    display: table;
}

#pageFooter {
    display: table-footer-group;
}

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
}
登入後複製

HTML:

<div>
登入後複製

自訂:

頁碼的外觀可以透過修改來自訂#pageFooter 的屬性,例如文字格式、定位和背景樣式。

以上是為什麼無法列印 HTML 格式的頁碼以及解決方法是什麼?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板