JavaScriptで印刷・保存ボタンを作る方法【window.print()の使い方】

クリックするとブラウザの印刷・保存ダイアログが開くボタンの作り方を解説します。

ウェブサイトのページを印刷または保存したい場合、通常はブラウザのメニュー(多くの場合、画面左上)から操作できます。

• ファイル → 印刷と進み、「保存」ボタンをクリックしてPDFとして保存するか、プリンターで印刷します。
• ショートカットキー: Cmd + P(Mac)/ Ctrl + P(Windows)

しかし、ユーザーがもっと手軽にページを印刷・保存できるように、クリックひとつでブラウザの印刷ダイアログが開くボタンを設置できたら便利ですよね。

印刷・保存ボタンを作成する

それでは実装していきましょう。まずは、適切なクラス名を付けたボタンを作成します。

<button class="button-print-or-save-document">Print or Save Document</button>

コードは誰にとっても読みやすく!

クラス名、変数名、関数名には、上記のボタンのように長めで明示的な名前を使うのが一般的におすすめです。btn-pos-d のような短い省略形(暗黙的な名前)は避けましょう。誰もそのようなコードを読みたくないものです。

次に、JavaScriptでボタンに動作を追加します。

const buttonPrintOrSaveDocument = document.querySelector(
  ".button-print-or-save-document"
)

function printOrSave() {
  window.print()
}

buttonPrintOrSaveDocument.addEventListener("click", printOrSave)

これで完成です。このボタン要素は、ユーザーに手軽な印刷・保存機能を提供したい任意のウェブページで再利用できます。

コードの仕組み

• まず、button-print-or-save-document クラスを持つボタンを querySelector で選択し、その参照を const 変数(buttonPrintOrSaveDocument)に格納します。
• 次に、呼び出されると window.print() メソッドを実行する名前付き関数 printOrSave() を定義します。このメソッドがブラウザの印刷ダイアログを開く役割を担います。
• 最後に、2つの引数を持つイベントリスナーを設定します。1つ目はボタン要素の click イベントを監視し、2つ目はイベント発生時に呼び出す printOrSave 関数を指定します。

デモコードで実際の動きを確認してみてください。