需求情境

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

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

我自己是在 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{…} 設定紙張配置－大小、方向、邊界。

參考資料