<meter id="7ntxv"></meter>

<b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
<nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

    <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
    <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

    <mark id="7ntxv"></mark>
    <meter id="7ntxv"><var id="7ntxv"></var></meter>

    知識 分享 互助 懶人建站

      懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

      懶人建站提供網頁素材下載、網站模板
      知識 分享 互助!

      html/css打印樣式

      作者:佳明媽 來源:web前端開發 2016-10-02 人氣:
      顯示器(screen)和打印機(printer)是兩種差別很大的設備,所以要設置html/css打印樣式。 screen一般使用邏輯單位比如px,而打印機則應該使用物理單位比如cm或in。我們常見的A4紙張大小在不同DPI的顯示

      顯示器(screen)和打印機(printer)是兩種差別很大的設備,所以從瀏覽器里看到的頁面,打印出來也許和你看到的樣子有很大的差距,所以要設置html/css打印樣式,
      screen一般使用邏輯單位比如px,而打印機則應該使用物理單位比如cm或in。我們常見的A4紙張大小在不同DPI的顯示器上顯示的大小是不同的。
      因此如果要精確的控制打印效果就應該使用print css,這是跨平臺兼容的標準。不推薦使用瀏覽器插件方式實現打印。
      web打印還有一種解決方式是生成pdf格式文件,客戶端下載來打印,這也是不錯的一種打印方式,因為pdf本身就是一種打印標準,可以做到精確控制。
      可以使用jsPDF在客戶端動態生成pdf,也可以在服務器端使用一些組件生成pdf后傳送給客戶端。

      當然首選還是使用print  css來實現打印。

      怎么引入css打印樣式print css?

      • 使用link標簽就像通常在html頁面中引入樣式表一樣,不過附加一個額外的media屬性,如下面這樣:
      <link rel="stylesheet" href="print.css" media="print" />

      表明print.css樣式表是用于打印的

      • 使用@media規則可以在通用的樣式表中,使用@media規則指定樣式用于打印,比如這樣:
      @media print selector {
      ...
      }

      或者

      @media print {
        selector{
        ...
        }
      }
      • 使用@import規則使用@import規則在通用的樣式表中導入打印樣式表,有兩種形式,其本質是一樣的。

      css文件中:

      @import url(print-style.css) print;

      html文件中:

      <style type="text/css">
      @import url(print-style.css) print;
      </style>

      使用link標簽要比使用@import規則性能更好。

      網頁打印樣式的尺寸單位設置

      顯示時一般使用px,em或pt等邏輯單位,但在打印時要使用物理單位,比如cm或in(英寸)。對于常見的DPI(Dot Per Inch)為96的screen,px與cm的換算關系如下:

      1 inch = 2.54 cm

      1cm = 96/2.54 ≈ 37.80 px

      1px = 2.54/96 ≈ 0.0265 cm

      100px = 2.65 cm

      A4紙的標準尺寸為:

      21.0cm * 29.7 cm

      在96DPI分辨率下,其對應的像素尺寸大約為:

      794px * 1123px

      因為不同的DPI下,其對應的像素尺寸是不同的,所以才要使用print css,使用物理單位來描述要打印的頁面,這樣打印效果就會一致了。

      @page規則(at-rule)

      @page 規則用于指定打印頁面的一些屬性,包括紙張尺寸,方向,頁邊距,分頁等特性。其語法如下:

      @page :pseudo-class {
        size: A4 landscape;
        margin:2cm;
      }

      其中偽類可以指定:

      • page-break-before用于設置元素前面的分頁行為,可取值:
      • auto默認值。如果必要則在元素前插入分頁符。
      • always在元素前插入分頁符。
      • avoid避免在元素前插入分頁符。
      • left在元素之前足夠的分頁符,一直到一張空白的左頁為止。
      • right在元素之前足夠的分頁符,一直到一張空白的右頁為止。
      • inherit規定應該從父元素繼承 page-break-before 屬性的設置。
      • page-break-after設置元素后的分頁行為。取值與page-break-before一樣。
      • page-break-inside設置元素內部的分頁行為。取值如下:
      • auto默認。如果必要則在元素內部插入分頁符。
      • avoid避免在元素內部插入分頁符。
      • inherit規定應該從父元素繼承 page-break-inside 屬性的設置。

      比如:

      @media print {
        section {page-break-before: always;}
        h1 {page-break-after: always;}
        p {page-break-inside: avoid;}
      }
      • orphans設置當元素內部發生分頁時必須在頁面底部保留的最少行數。
      • widows設置當元素內部發生分頁時必須在頁面頂部保留的最少行數。比如:
      @media print {
        p {orphans:3; widows:2;}
      }

      css打印樣式其他說明

      1. 對于頁面上有顯示而不想打印的內容,可以將其display設置為none來避免打印。
      2. 需要打印的內容盡量避免float,有些瀏覽器不會正確的打印浮動的內容。
      3. 可以調用window.print()函數來打印當前頁面。
      4. 分頁打印或換頁打?。簆age- break-before和page-break-after CSS屬性并不會修改網頁在屏幕上的顯示,這兩個屬性是用來控制文件的打印方式。每個打印屬性都可以設定4種設定值:auto、always、left和 right。其中Auto是默認值,只有在有需要時,才需設定分頁符號 (Page breaks)。page-break-before若設定成always,則是在遇到特定的組件時,打印機會重新開始一個新的打印頁。page- break-before若設定成left,則會插入分頁符號,直到指定的組件出現在一個左邊的空白頁上。page-break-before若設定成 right,則會插入分頁符號,直到指定的組件出現在一個右邊的空白頁上。page-break-after屬性會將分頁符號加在指定組件后,而非之前。在下列程序中您將可以看到這些屬性的設定。
      ↓ 查看全文

      html/css打印樣式由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

      懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

      html/css打印樣式-最新評論

      亚洲免费的黄色网站_黄色网站在线放久操射视频_A片www.黄色网站成年人_天天干 天天操天天干

      <meter id="7ntxv"></meter>

      <b id="7ntxv"><listing id="7ntxv"><ol id="7ntxv"></ol></listing></b>
      <nobr id="7ntxv"></nobr><mark id="7ntxv"></mark>

        <p id="7ntxv"><menuitem id="7ntxv"><font id="7ntxv"></font></menuitem></p>
        <sub id="7ntxv"><menuitem id="7ntxv"><meter id="7ntxv"></meter></menuitem></sub>

        <mark id="7ntxv"></mark>
        <meter id="7ntxv"><var id="7ntxv"></var></meter>