利用javascript將網頁輸出成pdf或列印

Table of Contents

Table of Contents

在某些場合會希望能將網頁存成pdf檔案或是列印成紙本,雖然可以透過瀏覽器的列印功能達成目的,但是如果畫面中有些部分是不需要,或是只想輸出部分內容時,開發者可以透過javascript以及css來完成更細微的操作。
本篇文章將介紹使用javascript以及css來達成將網頁輸出成pdf或列印成紙本的方法。



目的

為了方便使用者操作,需要在畫面上配置一個列印按鈕,按下列印按鈕後跳出列印功能的畫面。 列印功能可以將網頁輸出成pdf或紙本,但該網頁中有部分內容不輸出。

  • 結尾(Footer)
  • 列印按鈕

另外,有部分是在網頁上沒有顯示出來,但列印時要被輸出。



成果

以下是在codepen中實作出來的結果。點擊print按鈕可以顯示列印功能畫面,從中選擇輸出成pdf或是列印成紙本。
CSS框架是使用tailwindcss 2.2.9,可以換成任何你喜歡的框架。
主要的元件有,print按鈕、Header, Body, Footer。Body中含有沒有顯示但會被列印出來的部分。



解說

javascript: window.print()

想要呼叫列印功能畫面,可以用javascript中使用window.print()來完成。
因此在按鈕的點擊事件(onclick)中加入後,按下按鈕即可跳出列印功能的畫面。

<button class="border bg-green-300 p-1 mb-1 no-print" onclick="window.print()">Print</button>

@media

透過CSS@media語法,可以去設定不輸出、不顯示的部分。
@media print {...}表示列印畫面中使用的css設定,所以在裡面設定一個**CSS class(例如:no-print)**用來把不想被輸出(但會被顯示)的部分隱蔽掉即可。

@media print {
  .no-print {
    display: none;
  }
}

同樣地,@media screen {...}表示一般在螢幕畫面中使用的css設定,所以在裡面設定一個**CSS class(例如:no-screen)**用來把不想被顯示(但會被輸出)的部分隱蔽掉即可。

@media screen {
  .no-screen {
    display: none;
  }
}

沒有出現背景色

如果沒有特別設定,輸出時可以會出現背景色不見的現象,這時候可以在想要出現背景色的要素的CSS設定中加上-webkit-print-color-adjust: exact;
在範例中有做一個**CSS class(print-background)**讓整體的背景色都在輸出時顯示出來。

.print-background {
  -webkit-print-color-adjust: exact;
}

結論

以上介紹了使用javascript以及css來達成將網頁輸出成pdf或列印成紙本的方法。
在工作業務的應用上有很大的可能性會使用到這樣的功能。而透過javascript跟CSS可以讓我們去做到更細微的設定。