読み込み中...

JavaScriptで印刷を簡単に！10選の作り方・使い方・カスタマイズ

JavaScriptで印刷を簡単に実装する方法 JS
2023.04.08
この記事は約11分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

本記事のサンプルコードを活用して機能追加、目的を達成できるように作ってありますので、是非ご活用ください。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を満たす現役のプログラマチームによって監修されています。

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

JavaScriptを使って印刷機能を実装する方法を、この記事で詳しく解説します。

初心者の方でもすぐに理解できるよう、基本的な使い方から応用例まで、具体的なサンプルコードと共に丁寧に説明していきます。

●JavaScriptでの印刷機能の基本

ウェブページに印刷機能を追加することは、ユーザビリティを向上させる重要な要素です。

JavaScriptを使えば、簡単かつ効果的に印刷機能を実装することができます。

ここでは、その基本的な方法について説明します。

○window.print()メソッド

JavaScriptで印刷機能を実装する際、最も重要となるのがwindow.print()メソッドです。

このメソッドを使うことで、ブラウザの印刷ダイアログを開くことができます。

簡単な操作で印刷機能を追加できる、非常に便利な方法といえるでしょう。

●JavaScriptでの印刷機能の使い方

印刷機能の基本を理解したところで、実際の使い方を見ていきましょう。

ここでは、さまざまなシナリオに対応したサンプルコードを紹介します。

この例を参考に、自分のプロジェクトに最適な印刷機能を実装することができます。

○サンプルコード1：ボタンクリックで印刷

まずは、ボタンをクリックすると印刷ダイアログが開く、最も基本的な実装方法を見ていきましょう。

次のコードを使用することで、シンプルな印刷機能を簡単に実装することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ボタンクリックで印刷</title>
</head>
<body>
    <h1>JavaScriptで印刷を簡単に実装</h1>
    <button onclick="printPage()">印刷する</button>

    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

このコードでは、ボタンをクリックするとprintPage()関数が呼び出され、window.print()メソッドが実行されます。

その結果、印刷ダイアログが表示されるわけです。

○サンプルコード2：特定の要素だけを印刷

ウェブページ全体ではなく、特定の要素だけを印刷したい場合があります。

そのような場合、CSSを使って印刷対象の要素を指定することができます。

次のコードでは、id=”printArea”のdiv要素のみを印刷するように設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>特定の要素だけを印刷</title>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            #printArea * {
                visibility: visible;
            }
            #printArea {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <h1>JavaScriptで印刷を簡単に実装</h1>
    <div id="printArea">
        <h2>印刷対象の要素</h2>
        <p>この要素だけが印刷されます。</p>
    </div>
    <button onclick="printPage()">印刷する</button>

    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

このコードでは、@media printを使用して印刷時のスタイルを指定しています。

body要素の中身を非表示にし、#printArea内の要素のみを表示することで、特定の要素だけを印刷することができます。

○サンプルコード3：ページの一部を印刷

複数の要素を印刷したい場合、クラスを使って印刷対象を指定することができます。

次のコードでは、class=”print-section”のdiv要素を印刷するように設定しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページの一部を印刷</title>
    <style>
        @media print {
            body * {
                visibility: hidden;
            }
            .print-section * {
                visibility: visible;
            }
            .print-section {
                position: absolute;
                top: 0;
                left: 0;
            }
        }
    </style>
</head>
<body>
    <h1>JavaScriptで印刷を簡単に実装</h1>
    <div class="print-section">
        <h2>印刷対象のセクション1</h2>
        <p>このセクションだけが印刷されます。</p>
    </div>
    <div class="print-section">
        <h2>印刷対象のセクション2</h2>
        <p>このセクションも印刷されます。</p>
    </div>
    <button onclick="printPage()">印刷する</button>

    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

このコードでは、.print-sectionクラスを持つ要素のみが印刷されます。

複数の要素に同じクラスを適用することで、ページの特定の部分だけを印刷することができます。

○サンプルコード4：印刷時のスタイル指定

印刷時に特定のスタイルを適用したい場合、@media printを使用してスタイルを指定することができます。

次のコードでは、画面表示時と印刷時で異なるスタイルを適用する方法を表しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>印刷時のスタイル指定</title>
    <style>
        h1 {
            color: blue;
        }
        @media print {
            h1 {
                color: black;
            }
        }
    </style>
</head>
<body>
    <h1>JavaScriptで印刷を簡単に実装</h1>
    <button onclick="printPage()">印刷する</button>

    <script>
        function printPage() {
            window.print();
        }
    </script>
</body>
</html>

このコードでは、画面表示時にh1要素の文字色を青に、印刷時には黒に設定しています。

@media printを使用することで、印刷時にのみ適用されるスタイルを指定できます。

●JavaScriptでの印刷機能の応用例

基本的な印刷機能の実装方法を理解したところで、より高度な応用例を見ていきましょう。

ここでは、ユーザビリティを向上させるための印刷プレビュー機能の実装方法を紹介します。

○サンプルコード5：印刷のプレビュー表示

印刷前にプレビューを表示したい場合、新しいウィンドウを開いてプレビューを表示する方法があります。

次のコードでは、印刷対象の要素をプレビューウィンドウに表示しています。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>印刷のプレビュー表示</title>
</head>
<body>
    <h1>JavaScriptで印刷を簡単に実装</h1>
    <div id="printArea">
        <h2>印刷対象の要素</h2>
        <p>この要素が印刷プレビューに表示されます。</p>
    </div>
    <button onclick="printPreview()">印刷プレビューを表示</button>

    <script>
        function printPreview() {
            var printContent = document.getElementById("printArea").innerHTML;
            var previewWindow = window.open("", "_blank");
            previewWindow.document.write("<html><head><title>印刷プレビュー</title></head><body>");
            previewWindow.document.write(printContent);
            previewWindow.document.write("</body></html>");
            previewWindow.document.close();
        }
    </script>
</body>
</html>

このコードでは、printPreview()関数が呼び出されると、新しいウィンドウが開き、印刷対象の要素がそのウィンドウに表示されます。

ユーザーは印刷前に内容を確認することができます。

●JavaScriptでの印刷機能の注意点と対処法

印刷機能を実装する際には、いくつかの注意点があります。

ここでは、実際の運用で発生する可能性のある問題とその対処法について説明します。

この点に注意することで、より安定した印刷機能を提供することができます。

JavaScriptを使って印刷機能を実装する際には、何点か注意点があります。

まず、一部のブラウザでは、スクリプトによる印刷ダイアログの自動表示がブロックされることがあります。

このような場合、ユーザーに印刷ボタンをクリックしてもらうよう案内することが望ましいでしょう。

また、印刷時のページサイズや余白については、ブラウザの設定やプリンタの設定に依存する部分があります。

CSSで@media printを使用して調整することはできますが、完全な制御が難しい場合もあります。

印刷物の品質が特に重要な場合は、PDFなどの印刷用フォーマットを別途用意することを検討するとよいでしょう。

まとめ

この記事では、JavaScriptを使った印刷機能の実装方法について、基本的な使い方から応用例まで幅広く解説しました。

サンプルコードを参考にしながら、実際のプロジェクトで印刷機能を実装してみてください。

JavaScriptを使えば、ユーザーフレンドリーな印刷機能を簡単に追加することができます。

ウェブアプリケーションの使いやすさを向上させる上で、非常に有用なテクニックといえるでしょう。