Webアプリケーションで小票や帳票を印刷する際、改ページやレイアウト調整に悩むケースが多い。以下では、実際の環境（Windows 10 + 佳博 GP-L80160 プリンタ）に基づいた印刷設定と、CSS/JavaScriptによる改ページ制御の具体的な手法を紹介する。

小票プリンタの基本設定

対応ドライバ「GAINSCHA 80mmシリーズ V18」をインストール後、「デバイスとプリンター」からプロパティを開き、「余白なし」を選択することで、最大サイズで印刷可能。Google Chromeでの動作を前提とする。

CSSによる改ページ制御

page-break-after: always を使用すると、その要素の直後に強制的に改ページが挿入される。印刷専用スタイルは @media print セレクタ内で定義する。

<style media="print">
.page-break {
    page-break-after: always;
}
.no-print {
    display: none;
}
</style>

<div class="content-block">
    <h2>第1ページの内容</h2>
    <p>ここに詳細情報を記載...</p>
</div>
<div class="page-break"></div>
<div class="content-block">
    <h2>第2ページの内容</html>
    <p>次のページの情報...</p>
</div>

部分印刷のJavaScript実装

特定の範囲のみを印刷するには、コメントタグで囲い、その間のHTMLを抽出して印刷する手法が有効。

function printSection() {
    const fullHtml = document.body.innerHTML;
    const startTag = '<!--startprint-->';
    const endTag = '<!--endprint-->';
    
    const startIndex = fullHtml.indexOf(startTag) + startTag.length;
    const endIndex = fullHtml.indexOf(endTag, startIndex);
    const printContent = fullHtml.substring(startIndex, endIndex);
    
    document.body.innerHTML = printContent;
    window.print();
    location.reload(); // 印刷後は元のページに戻す
}

動的コンテンツ生成による改ページ印刷

複数の帳票を連続印刷する場合、テンプレートをループで生成し、各ブロックの末尾に改ページを挿入する。

function generateAndPrintTickets(tickets) {
    let output = '';
    tickets.forEach((ticket, index) => {
        output += `
            <div class="ticket-template">
                <h3>${ticket.title}</h3>
                <p>券番号: ${ticket.id}</p>
                <p>有効期限: ${ticket.expiry}</p>
            </div>
            ${index < tickets.length - 1 ? '<div style="page-break-after: always"></div>' : ''}
        `;
    });
    document.body.innerHTML = output;
    window.print();
}

印刷時のヘッダー・フッター制御（IE限定）

Internet Explorerでは、ActiveX経由で印刷ヘッダー・フッターをカスタマイズ可能。ただし、セキュリティ設定で許可が必要。

try {
    const shell = new ActiveXObject("WScript.Shell");
    const regPath = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
    shell.RegWrite(regPath + "header", "&w&b ページ &p/&P");
    shell.RegWrite(regPath + "footer", "");
} catch (e) {
    console.warn("IE以外では動作しません");
}

印刷プレビューと設定の呼び出し（IE専用）

WebBrowser ActiveXコントロールを使用して、印刷ダイアログを直接呼び出すことも可能。

<object id="iePrinter" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" width="0" height="0"></object>
<button onclick="document.getElementById('iePrinter').ExecWB(6,1)">印刷</button>
<button onclick="document.getElementById('iePrinter').ExecWB(7,1)">プレビュー</button>
<button onclick="document.getElementById('iePrinter').ExecWB(8,1)">ページ設定</button>

レスポンシブ印刷スタイルの応用

画面表示と印刷出力を分けることで、印刷時のみ特殊フォーマットを適用できる。

<style>
@media screen {
    .print-only { display: none; }
}
@media print {
    .screen-only { display: none; }
    body { font-size: 10pt; }
}
</style>