HTMLのボタン押下で印刷用ウィンドウに動的にデータを表示する方法

この記事は公開から4年以上経過しています。

WEB開発で、HTMLページ上に配置したボタンを押下して印刷用にレイアウトしたデータを別窓でプレビュー＆印刷する方法についての備忘録です。

概要

ページを表示すると以下のようにコンテンツと印刷ボタンPrintを表示します。

Printボタンを押下すると別窓で印刷プレビューウィンドウが開き、続いてブラウザの印刷プレビューダイアログを表示します。このとき、ユーザーは印刷プレビューウィンドウで直感的に印刷結果をイメージすることができます。

実際にPDFに印刷した結果は以下のとおり、おおよその見た目通りに印刷できていることが分かります。

サンプルソースコード

処理の流れは

ページ表示時にjavascript変数dataを動的にメインウィンドウコンテンツに設定。
Printボタン押下でtemplateから印刷用レイアウトを読み込んだうえでjavascript変数dataを動的に印刷プレビューコンテンツに設定。

となります。
印刷レイアウトをテンプレート化することにより、動的に印刷レイアウトを変更するといった応用なども可能です。

データの動的書き換えにはjquery、画面レイアウトにはbootstrapを、いずれもCDNから取り込んで利用しています。また、一目で分かり易いようにCSSファイルを使わず敢えてstyleタグやインラインで記述しています。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible"
        content="IE=edge">
    <!-- jquery cdn -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous"></script>
    <!-- bootstrap cdn -->
    <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous">
    <title>Show page preview</title>
</head>

<body>

    <!-- 印刷プレビューウィンドウ用テンプレート -->
    <template id="preview-window-template">

        <meta charset="UTF-8">
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible"
            content="IE=edge">
        <!-- jquery cdn -->
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"
            integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
            crossorigin="anonymous"></script>
        <style>
            /* 印刷プレビュー＆印刷用レイアウト */
            @media print,
            screen {
                body {
                    margin: 0;
                    width: 210mm;
                    height: 297mm;
                }
            }

        </style>
        <title>Print preview</title>
        <div style="margin-top: 1em;">

            <table style="width: 500px; border-collapse: collapse; margin: auto;"
                border="1">
                <tbody>
                    <tr>
                        <td>Preview window</td>
                    </tr>
                    <tr>
                        <td data-value="content"></td>
                    </tr>
                </tbody>
            </table>

            <script>
                // 印刷プレビューウィンドウ表示後に印刷(プレビュー)実行
                $(function () {
                    window.print();
                });

            </script>
        </div>

    </template>

    <!-- メインウィンドウコンテンツ -->
    <div class="container p-5"
        id="display-content">
        <div class="row">
            <div class="col align-self-center">
                <div class="card">
                    <div class="card-header">
                        <h5 class="mb-0 text-primary">Main window</h5>
                    </div>
                    <div class="card-body">
                        <p class="card-text"
                            data-value="content"></p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 印刷ボタン -->
        <div class="row">
            <div class="col text-center m-5">
                <div class="btn btn-primary"
                    id="print-button">Print</div>
            </div>
        </div>
    </div>
    <script>
        // 表示/印刷用のデータ
        var data = 'This is a test data.';
        $(function () {
            // メインウィンドウにデータをセット
            $('#display-content').find('[data-value="content"]').text(data);
        });
        $('#print-button').click(function () {
            // テンプレートから印刷プレビューウィンドウレイアウトをロード
            var template = document.querySelector('#preview-window-template').cloneNode(true);
            // 印刷プレビューウィンドウにデータをセット
            $(template.content).find('[data-value="content"]').text(data);
            // 印刷プレビューウィンドウを表示
            var previewWnd = window.open('', '', 'width=800, height=600, scrollbar, resizable');
            previewWnd.document.write(template.innerHTML);
            previewWnd.document.close();
        })

    </script>
</body>

</html>

以上です。