ブラウザで印刷機能を実装する際によく使用される`window.print()`メソッド。このメソッドを使って、Webページの印刷機能を簡単に実装する方法を解説します。

window.print()の基本的な使い方

`window.print()`は、ブラウザの印刷ダイアログを表示するJavaScriptメソッドです。

// 印刷ダイアログを表示
window.print();

最もシンプルな実装例は以下のようになります：

<button onclick="window.print()">印刷する</button>

特定の要素だけを印刷する方法

ページ全体ではなく、特定の要素だけを印刷したい場合は、CSSの`@media print`を使用します：

<style>
@media print {
    body * {
        visibility: hidden;
    }
    #printArea, #printArea * {
        visibility: visible;
    }
    #printArea {
        position: absolute;
        left: 0;
        top: 0;
    }
}
</style>

<div id="printArea">
    <h1>印刷したい内容</h1>
    <p>この部分だけが印刷されます</p>
</div>
<button onclick="window.print()">印刷する</button>

印刷プレビューを実装する方法

新しいウィンドウで印刷プレビューを表示する実装例：

function printPreview() {
    // 新しいウィンドウを開く
    let printWindow = window.open('', '', 'width=800,height=600');
    
    // 印刷したい内容をセット
    printWindow.document.write('<html><head><title>印刷プレビュー</title></head><body>');
    printWindow.document.write(document.getElementById('printArea').innerHTML);
    printWindow.document.write('</body></html>');
    
    printWindow.document.close();
    printWindow.focus();
    
    // 印刷ダイアログを表示
    printWindow.print();
}

よくあるトラブルと解決方法

1. 印刷時にスタイルが適用されない

/* 印刷用のスタイルシートを明示的に指定 */
<link rel="stylesheet" type="text/css" media="print" href="print.css">

2. 背景色が印刷されない

/* 印刷時に背景色を強制的に表示 */
@media print {
    * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}

3. 改ページが意図通りにならない

/* 特定の要素の前で改ページ */
.page-break {
    page-break-before: always;
}

ブラウザ対応状況

`window.print()`は、すべての主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。ただし、印刷のレイアウトや表示方法は、ブラウザによって若干異なる場合があります。

まとめ

  • `window.print()`を使用することで、簡単に印刷機能を実装できます
  • 特定の要素だけを印刷したい場合は、`@media print`を活用します
  • 印刷プレビュー機能は、新しいウィンドウを開いて実装できます
  • ブラウザによって印刷結果が異なる場合があるため、テストは必須です

以上の実装方法を参考に、ユーザーフレンドリーな印刷機能を実装してください。必要に応じて、プロジェクトの要件に合わせてカスタマイズすることをお勧めします。