瀏覽器列印方案

空山與新雨發表於2022-11-25
瀏覽器

前言

在web端列印是比較常見的需求，實際工作中也接觸了不少，在這裡對工作中用到的做一下總結

1.透過媒體查詢隱藏元素

透過style標籤內聯引入，或者使用媒體查詢media="print"外鏈樣式表。然後將無關元素隱藏，只將需要列印的內容展示出來；這時候需要專門寫一套列印樣式，頁面修改，列印樣式可能也需要修改，維護成本較高；

<style>
  @media print{}
</style>
// 或者
<link rel="stylesheet" media="print" href="print.css”>

2.將需要列印的元素複製到一個iframe中

需要遍歷元素和所有子元素，克隆dom到新的iframe，然後在ifram中發起列印。關鍵技術點是要把樣式完整複製過去；jquery.print.js; react-to-print就是這樣實現；
例子

這種方案的好處是適用性強，缺點就是實現難度大；

3.列印頁面設定

支援@page 來設定，同時支援 偽類 :left 、:right、:first

  1. :left設定多頁列印的時候偶數頁的配置；
  2. :right設定多頁列印的時候奇數頁的配置;
  3. :first 設定第一頁的配置
頁面寬度

列印常用的是A4紙，A4紙尺寸是21cm×29.7cm,在css中可以使用size屬性設定

size屬性設定頁面大小和方向：

  1. 支援單獨設定 A4、A3等 , 預設是縱向
  2. 支援單獨portrait、landscape；紙張大小預設是關鍵詞letter;
  3. 也支援 A4、A3 和 portrait、landscape關鍵片語合： A4 landscape；
  4. 也支援直接設定頁面尺寸，比如：21cm 29.7cm，代表頁面寬高分別為21cm和29.7cm
  5. 未設定size屬性，可以在列印預覽選擇紙張大小和方向；設定之後就不能再選擇了。

例子

頁面的邊距
  1. margin屬性設定頁面的邊距 : 不支援 em 和 ex;
  2. 預設的列印會帶有頁首頁尾。頁首包括日期、title，頁尾包括連結和分頁等資訊。 可以透過 margin 設定邊距達到隱藏頁首頁尾的目的
@page {
    margin: 3.7cm 2.6cm 3.5cm;  /* 上下左右邊距 */
}
@page :left {
    margin-left: 2.5cm;
    margin-right: 2.7cm;
}
@page :right {
    margin-left: 2.7cm;
    margin-right: 2.5cm;
}
@page :first {
    size: A4 portrait;
    margin-left: 4cm;
    margin-right: 4cm;
}

/* 隱藏頁首 */
@page { margin-top: 0; }

/* 隱藏頁尾 */
@page { margin-bottom: 0; }
使用絕對物理單位

使用pt、mm、cm等絕對單位

分頁

列印的時候如果頁面很長就會自動分頁，如果我們希望分頁不要把一些元素分開，可以給元素設定break-inside: avoid;
不過可能會留下空白。

瀏覽器相容性
  1. firefox
    1. 不支援size屬性
    2. 可以在列印預覽設定紙張和列印方向
  2. safari
    1. 不支援@page
    2. 可以在列印預覽設定紙張和列印方向

調啟列印預覽

window.print() 、document.execCommand('print’) 、頁面右鍵選單列印、command+p

相關文章