需求情境

網頁上碰到區塊或是全部列印的需求時就會使用到列印的功能。

這篇會寫很簡單,因為我遇到需求沒有很複雜。

我自己是在 vue3 的專案中,需要去列出商品的資料,所以只需列出一部分的區塊就好,而不是全頁列印。

我最初找的方式

我找的是vue3-print-nb這一個 vue3 列印套件。

官方文檔: https://github.com/Power-kxLee/vue-print-nb

其實會發現很簡單,只需要加入v-print就可以達成需求。

但後來發現原生就能做到這件事情,也能不用套件完成。

瀏覽器內建的列印功能

其實最簡單的列印,其實就是在當前頁面中按下右鍵就有列印的選項。

程式的話,就是以下這串指令就可以完成:

1
window.print();

但可能很多人在此處會發現一些問題。

  1. 你只想印某些區塊,但是發現全部都印進去。
  2. 印出來的畫面怎麼都沒有樣式?

這其實是因為說,原生列印功能還需要的其他設定。

設定 @media print

有寫過 css 的人應該對 media 不陌生,除了在做 rwd 時會用到,其實在規範列印樣式時也同樣需求這個語法。

1
2
3
4
/* 一般樣式*/
@media print{
/* 列印時專用樣式 */
}

也可以另外寫一個檔案專門為列印時使用,再引入就好。

1
2
/* 一般樣式*/
@import "printStyle.css" print;

有一些比較常見的情況。

比如來說,想要去侷限列出的範圍:

1
2
3
4
5
6
/* 一般樣式*/
@media print{
.vic-box{
display:none;
}
}

比如來說,列印的畫面沒有顏色:

1
2
3
4
5
6
/* 一般樣式*/
@media print{
.vic-box{
-webkit-print-color-adjust: exact !important;
}
}

解釋:
economy=> 默認,給瀏覽器自己做調整。
exact=>使用自己設定好的列印模式。

此種作法可以平常用的 css 跟實際上要在列印時顯示的樣式給區分開。

設定列印頁面尺寸@page

可設置部分:

寬度跟高度,一個值時是高度。
控制尺寸: 比如說 A4、A5…。
頁面方向:portrait(直)、 landscape(橫)。

1
2
3
4
5
6
7
8
@page{
size: portrait; /* 直向(預設) */
size: landscape; /* 橫向 */
size: 10cm; /* 單值則長寬皆為10cm */
size: 4cm 6cm; /* 寬4cm 高6cm */
size: A4; /* 保留字 */
size: A4 landscape; /* 尺寸/保留字 + 方向 */
}

難道只能邊改邊打開列印看效果?

善用 Chrome Dev Tools 搞定這塊!

打開 dev tools 後,點擊右上角的三個點點。

點擊打開後會看到 more tools,裡面找到 Rendering。

Rendering 裡面會有 Emulate CSS media type 的選項。

最後選擇 print 就可以讓畫面上呈現的是列印模式。

小結

  • JS 原生列印:window.print()。
  • @media print{…} 列印時候處理的樣式。
  • @page{…} 設定紙張配置-大小、方向、邊界。

參考資料