JavaScriptを使用してページボタンを印刷または保存する方法

ブラウザの印刷または保存を開くボタンを作成する方法を学びます クリックするとファイルウィンドウのプロンプトが表示されます。

特定のWebサイトでページを印刷または保存する場合は、ブラウザ（通常は左上隅）に移動できます：

• ファイル→印刷→をクリックします 保存をクリックします ボタンをクリックして、ファイルを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)

これで、このボタン要素を、ユーザーにクイック印刷またはドキュメント保存オプションを提供する任意のWebページで再利用できます。

コードの仕組み

• まず、button-print-or-save-documentでボタンを選択します クラスを作成し、それへの参照をconstに格納します 変数（buttonPrintOrSaveDocument 。
• 次に、名前付き関数宣言を作成しますprintOrSave() window.printを実行します 呼び出されたときのメソッド。
• 最後に、2つの引数を使用してイベントリスナーを設定します。1つはclickをリッスンします。 ボタン要素のイベントと、printOrSaveを呼び出す別のイベント 機能。

デモコードを確認してください。