JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで印刷ダイアログを表示する方法｜window.print()の使い方を解説

JavaScriptで印刷ダイアログボックスを表示するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザ標準の印刷ダイアログがポップアップ表示され、どのプリンターを選択するかといった印刷オプションを簡単に設定できます。

印刷ダイアログの表示イメージ

window.print()を実行すると、以下のような印刷ダイアログが表示されます。

JavaScriptで印刷ダイアログを表示する方法｜window.print()の使い方を解説

サンプルコード

次のコードを実行すると、ボタンをクリックするだけでページを印刷できることを確認できます。

<!DOCTYPE html>
<html>
   <body>
      <button onclick="display()">Click to Print</button>
      <script>
         function display() {
            window.print();
         }
      </script>
   </body>
</html>

コードの解説

ボタンのonclick属性にdisplay()関数を紐づけ、その関数内でwindow.print()を呼び出しています。ユーザーが「Click to Print」ボタンをクリックするたびに、現在表示しているページの印刷ダイアログが立ち上がります。

活用のポイント

window.print()はChrome、Firefox、Edge、Safariなど主要なブラウザすべてでサポートされており、追加のライブラリなしで手軽に印刷機能を実装できます。ページ全体ではなく特定の要素だけを印刷したい場合は、CSSの@media printを使って印刷時の表示範囲を制御すると便利です。領収書や見積書など、ワンクリックで印刷できる機能をWebアプリに追加したい場合にぜひ活用してください。

  1. Google ChromeでJavaScriptをデバッグする方法【初心者向け】

    デバッグとはプログラムの誤り（バグ）を発見し、修正する一連のプロセスは「デバッグ」と呼ばれ、ソフトウェア開発においてごく普通に行われる作業のひとつです。JavaScriptの開発では、Google Chromeに標準搭載されている「デベロッパーツール」を活用することで、効率的にデバッグを進められます。Google ChromeでJavaScriptをデバッグする手順Google Chromeを使ってJavaScriptをデバッグするには、以下の手順に従ってください。1. デベロッパーツールを開くまず、Google Chromeブラウザを起動します。次に、画面右上にある縦3点のメニュー（⋮）をク

  2. JavaScriptでHTMLの子ノードを削除する方法をわかりやすく解説

    Web開発において、DOM操作は欠かせないスキルのひとつです。その中でも「子ノード（子要素）を削除する」処理は、リスト項目の動的な追加・削除など、さまざまな場面で活用されます。 JavaScriptでは removeChild() メソッドを使うことで、親要素から指定した子ノードを取り除くことができます。以下に、実際に動作するコード例を示します。 コード例 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=widt