添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

今天要來介紹一個比較不常用的東西,那就是 CSS 中的列印,在以前常常會將網頁列印出來,所以經常會使用到這個屬性,時到今日,使用的時機越來越少,只有一些報表有用到,因此今天就讓我們一起看看吧!

首先我們有一個畫面,裡面有三個區塊,如下:

<div class="page"> <div class="box red">red</div> <div class="page"> <div class="box blue">blue</div> <div class="page"> <div class="box green">green</div> </body> padding: 0; margin: 0; .box { display: flex; justify-content: center; align-items: center; font-size: 100px; height: 600px; .red { border: 10px solid #f66; .blue { border: 10px solid #66f; .green { border: 10px solid #6f6;
  • 直接網頁上右鍵列印( Ctrl+P
  • 使用 javascript window.print()

    如果想列印指定元素可以使用 javascript 另開分頁後列印

    // 例:這邊只想列印 red 區塊
    const content = document.querySelector(".red").innerHTML;
    const newPage = window.open("", "", "width=1000,height=500");
    newPage.document.write(content);
    newPage.print();
    

    或是使用可以接下來要介紹的 CSS 來控制

    CSS 列印樣式

    首先我們先來看看目前列印出來的樣式
    print-origin
    是不是看到了一些問題呢?

  • 頁首頁尾有怪東西
  • 同一區塊被斷開
  • 其實列印的時候預設會有日期網頁標題網址頁碼,不過看起來有點醜,那麼如何解決哩?這邊就用到 CSS 的語法囉!

    首先處理換頁的部分,這邊介紹兩個屬性,可以在列印時達到換頁的效果

    .page {
      page-break-inside: avoid; /* 若順著向下排列時會切開此元素,則直接換頁 */
      page-break-after: always; /* 碰到此元素會直接換頁 */
    

    @page

    再來則是頁首頁尾,在 CSS 內可以使用 @page 來設定基本的列印樣式

    size:設定列印的尺寸與方向,可依照紙張調整
  • margin :設定每頁邊界與內容的距離,小於一定數值時,則會將預設的標題等蓋過
    @page {
      size: portrait; /* 直向 */
      size: landscape; /* 橫向 */
      size: A4; /* 紙張大小 */
      size: A4 portrait; /* 混合使用 */
      margin: 0; /* 邊界與內容的距離 */
    

    設定好之後頁首頁尾就乾淨多了,如果想要上方有距離可自行設定 padding 或是 @page 內的 margin
    print-@page

    剛剛將預設的東西清掉後雖然乾淨多了,不過如果還想留下頁碼怎麼辦!?這邊提供一個製作頁碼的方法

    CSS 中其實有預設可用的計數器,功能有三個,分別是初始化增加取用

    body {
      counter-reset: page-number; /* 初始化,名字可自訂,數值為0 */
    .page {
      page-break-inside: avoid;
      position: relative;
      min-height: 100vh;
    .page::after {
      content: counter(page-number); /* 取用該名字的計數器 */
      counter-increment: page-number 1; /* 增加計數器數值 */
      position: absolute;
      right: 0;
      bottom: 0;
      left: 0;
      font-size: 30px;
      text-align: center;
    

    完成之後如下圖
    print-page-number
    此方法是定位在 page 這個 class,若是 page 的高度太高的話就不適用了

    @media print

    我們完成頁碼之後發現,不是在列印時也有頁碼,而且因為剛剛加上了 height: 100vh,所以也不會正常的排列了
    print-all
    這時候就可以用到列印中最重要的東西了,也就是 @media print,他的概念跟 @media screen 一樣,一個是螢幕的樣式,而另一個則是列印的樣式,已經會 RWD 的應該很好上手,那就讓我們來修改一下剛剛的問題吧!

    @media print {
      .page {
        page-break-inside: avoid;
        position: relative;
        min-height: 100vh;
      .page::after {
        content: counter(page-number);
        counter-increment: page-number 1;
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        font-size: 30px;
        text-align: center;
    

    修改完成後就大功告成了,網頁上的樣式還是本來的樣式,而列印時改成了三頁,而且顯示頁碼

    之前我也不是很認識列印的屬性,剛好最近工作上用到才知道,基本上都跟 RWD 的概念一樣,只是多了幾個屬性可以用,用起來還算容易,不過能看到自己做的東西照著想像的樣子印出來還是相當療癒阿!哈哈