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

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

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

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

はじめに

この記事を読めば、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>

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

下記のサンプルコードでは、特定の要素(ここでは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>

○サンプルコード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>

○サンプルコード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>

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>

これで、印刷のプレビューが別ウィンドウで表示されるようになりました。

必要に応じて、プレビューウィンドウに適用するスタイルを追加できます。

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

●印刷ダイアログの自動表示がブロックされることがある

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

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

●印刷時のページサイズや余白の調整

印刷時のページサイズや余白は、ブラウザの設定やプリンタの設定に依存します。

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

印刷物の品質が重要な場合は、PDFなどの印刷用フォーマットを用意することを検討してください。

まとめ

この記事では、JavaScriptでの印刷機能の使い方、応用例、注意点を解説しました。

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